jwScrollLoop - A jQuery-based looping and scrolling plugin

I needed a way to animate multiple images and divs alike, but I also needed looping functionality and additional options. So I created a simple plugin to scroll objects the way I needed them to:
jwScrollLoop
dc1

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" 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.

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" src="images/dc1.png" />
<img id="dp1" 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" src="images/dc1.png" />
<img id="dp1" 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>

jwScrollLoop

Jerome "PJ" Williams
www.JWorksStudios.com
twitter/@JWorksStudios
g+/JWorksStudios



GitHub
If you have ideas for improvements, don't hesitate to make changes. Grab it from GitHub and make it better!
http://github.com/jworksstudios/jwscrollloop

Additional plugin used in this demo, jwTextureSwim, to animate the space background.
http://github.com/jworksstudios/jwtextureswim

© JWorks Studios | Plugins