Scrollimate beta

Start Scrolling

Scrollimate

scroll-e-mate

Scrollimate is a plugin that takes your scrollbar functionality and animates elements to parameters sent to scrollimate. The word scrollimate is derived from two parts, one part scroll, one part animate.

Image is just for a Demo

Simplistic implementation

Watch how easy it is to get Scrollimate running on your page. Just one javascript file and your ready to attach it to an element. Attaching it is a breeze.

$('.element').scrollimate(
        //the scroll parameters
        { start : 100, end : 1000},
        //the start css properties
        { opacity : 0 }
        // the end css properties
        { opacity : 1}
      );

Installation

The nice thing about this plugin is that it is a one small file. Insert the file and its already to be used.

<script src="path-to/scrollimate.js"></script>

If your not useing jQuery yet. Youll need to add two files.

<script src="path-to/jquery.js"></script>
<script src="path-to/scrollimate.js"></script>

Now all you need to do is hook it to an element

How to use

From the sample page you can see sort of how Scrollimate works

$('.element').scrollimate(
        //the scroll parameters
        { start : 100, end : 1000},
        //the start css properties
        { opacity : 0 }
        // the end css properties
        { opacity : 1}
      );

So when the user scrolls down 100px from the top of the page the 'element' will start animating. The animation will end when the user has scrolled to 1000px from the top of the page. In this instance the code is going to be animating the opacity of the 'element'. You can use as many CSS properties, to animate, as you want.