jwScrollLoop is a simple script based on jQuery and the animation method. The script offers up a quick way to enable immediate scrolling right out of the box and multiple options to customize it to get more uses out of it. Below is a tutorial to get you set up, explain the parameters and what it can do for you...

Get your scripts

jQuery (1.8.2)
jwScrollLoop (min)

-- or --

.zip (full demo and tutorial)

Link your .js scripts

Now that you have the script, you need to link to it and a jQuery .js file. This script was created while linking to jQuery v1.8.2, so I'll recommend that, but you should not have an issue linking to other versions of jQuery.

<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type = "text/javascript" src = "script/jwscrollloop.js"></script>

Set the stage

Before you can start scrolling, you have to layout your page as you normally would. For the sake of this demo, the page will consist of a div-container and an image.

<div id="container-div" style="background: blue; width: 800px; height: 300px;">
<img id="dc1" alt="" src="images/dc1.png" />
</div>  

Result somewhat similar to this

 

Animation script

To animate image dc1, place the line of code in your javascript section between the <script> tags

$("#dc1").scrollLoop();

And you should see something like:

So what's happening in the function?

As you'll see, just using the default values you will get easy animation for your object. Here are the default values and definition for the function:

function scrollLoop():
'time' : 5000; - The duration it takes to complete the animation (in milliseconds).
'offsetX' : 1000; - The starting X-offset from the original position (in pixels; i.e., 1000px means 1000px to the right from the original position)
'deltaX' : -1000; - The ending X-offset from the original position (in pixels; i.e., -1000px). +value to go right, -value to go left
'offsetY' : 0; - The starting Y-offset from the original position (in pixels; i.e., -1000px = up from the original position)
'deltaY' : 0; - The ending Y-offset from the original position (in pixels; i.e., 1000px). +value to go down, -value to go up
'position_type' : "relative"; The positioning type of the object. Relative or Absolute. Makes a difference in where the object begins and ends.
'play_count' : -1; - The number of times to play the animation. -1 will play infinitely.

Let's highlight what's going on.

• From the original position of the image, we offset it on the X-axis to the position where we want it to start. By default, the offset is +1000px which means the image will start 1000 pixels to the right of its original position. Conversely, if we wanted it to start 300 pixels to the left of its original position, we would pass -300px.
• deltaX is the ending position from the original position, not the start position, which is offsetX.
• Setting offsetY and deltaY to 0px makes sure that A) the image starts at the original Y-position and B) it will end on the same Y-position, which means we'll get a straight trajectory (in this case, right to left).
• position_type. This is an important variable to get the image to do what you want it to. One MUST be set and by default it's relative. Changing it to absolute positioning allows more control over where your object ultimately ends up on the screen.

The the other values should be self explanatory. If not, play around with them to get a better understanding on how the function works. As a matter of fact...

Let's have some fun

Let's make some changes to the function to show the different effect you can get. At the moment we have the image moving right to left on a flat plane. Let's add a new function to the mix that will go in the opposite direction and go from bottom to top. And while we're at it, let's modify the function for dc1 to speed the cloud up to a more realistic pace...

In the section where you have the image dc1 displayed, input an image tag (pointing to the same directory) and have it target the image dp1.png. Also, make sure the id is dp1, too.

<div id="container-div" style="background: blue; width: 800px; height: 300px;">
<img id="dc1" alt="" src="images/dc1.png" />
<img id="dp1" alt="" src="images/dp1.png" />
</div>

Now, add another line of code in the javascript area with our new adjustments...

$("#dc1").scrollLoop({'time':1000});
$("#dp1").scrollLoop({'time':10000, 'offsetX':-600, 'deltaX':600, 'offsetY':200, 'deltaY':-300});

And let's also hide the new image until it enters the boundaries of our giant blue box by adding an overflow: hidden value to the exisiting div, container.

<div id="container-div" style="background: blue; width: 800px; height: 300px; overflow: hidden;">    

Wrapping up...

The main power of this script is to allow infinite or finite plays of the animation in a quick and simple way. It doesn't just work with images other elements. Crappy graphics aside, if you use your imagination, this can be used to spruce up your web designs with ease. The .js has another function that allows you to customize all of the object's css properties by way of passing arrays. It has default values too so play around with it and you can come up with some unique effects. Hopefully you like it and pass it on. Take it, tweak it, pass it on.

<html>
<head>
<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type = "text/javascript" src = "script/jwscrollloop.js"></script>
</head>

<body>
<div id="container-div" style="background: blue; width: 800px; height: 300px; overflow: hidden;">
<img id="dc1" alt="" src="images/dc1.png" />
<img id="dp1" alt="" src="images/dp1.png" />
</div>

<script type = "text/javascript">
$("#dc1").scrollLoop({'time':1000});
$("#dp1").scrollLoop({'time':10000, 'offsetX':-600, 'deltaX':600, 'offsetY':200, 'deltaY':-300});
</script>

</body>
</html>