How To Keep Scrolling A DIV Background Image Using JavaScript?

Like in the new era of designing every designer is adding some animation to there website. There are many ways to add animation like GIF image, SWF flash files, Movie Clips but all of these are too heavy that will effect on your SEO that is bad. But still animation catches every eyes so its also important too.

Now if you will talk about CSS3 background animation then you are forgetting those old visitors that are still using old browsers and every designer need his site to open in any browsers same so here is the last solution of JavaScript that will work on cross browsers so here we are with JavaScript snippet that will help you to animate your DIV background and that will look amazing.

Features:

1.) Pure JavaScript Code.
2.) No Window.Onload Function To Conflict With Your Previous Codes.
3.) No CSS3.
4.) Cross Browser.
5.) Fully Customizeable.
6.) Scroll Background Image From Top To Bottom.
7.) Short And Simple Code.
8.) Easy To Add And Use.
9.) 101% Smooth Scrolling.
10.) Work On Any Platform.

How To Do It?

There are only three codes used in this snippet. HTML, CSS, JavaScript and 99.99% browsers and platform support it. So just add this code where you want to show it. But you have to keep something in your mind. CSS codes should be before your DIV code and JavaScript code should be after DIV code otherwise it will not work.

<style type="text/css">
#sliding_background {
background-image:url('http://i.imgur.com/3QP1ROV.jpg');
width:780px;
height:280px;
color:#FFFFFF;
overflow:hidden;
}
</style>
<div id="sliding_background">
<h1>Scrolling Background Of A DIV By JavaScript:</h1>
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
</div>
<script type="text/javascript">
var y = 0;
requestAnimationFrame(move);
var EXEscrollBG = document.getElementById("sliding_background");
function move(){
 y++;
 EXEscrollBG.style.backgroundPosition = '0px ' + y + 'px';
 requestAnimationFrame(move);
}
</script>

Customization:

1.) Change http://i.imgur.com/3QP1ROV.jpg with your any size image link.
2.) No more editing required. Save and done.

Last Words:

This is what we have and shared in easy steps for newbies so that they can easily know how it works. Stay with us because we are going to share more codes that will make your coding more easy for you. If you liked it then share it and be with us to get next tutorial. If you have any problem then feel free to ask us. We will help you with what we can or have.