jQuery Plugin For Simple Html Element Scrolling Effects - scrollme

scrollme is a simple lightweight jQuery plugin which allows to scale, rotate, translate and change the opacity of Html elements as you scroll down/up the web page.

How to use it:

1. Include jQuery javascript library and the jQuery scrollme plugin in the page.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/jquery.scrollme.js"></script>

2. Add the CSS class 'animateme' to Html elements you want to animate and wrap them in a container with class of 'scrollme'. All the scrolling effects can be passed in via data-* attributes.

<div class="scrollme">
  <div
    class="animateme"
    data-when="enter"
    data-from="0.5"
    data-to="0"
    data-opacity="1"
    data-translatex="-200"
    data-rotatez="90"
  >
  </div>
</div>

3. All the options.

• data-when="enter" : enter, exit or view. Determines when the scrolling boundaries start and end.
• data-from="0.5 ": Specifies the position within through the scrolling boundaries at which the animation starts and ends. 
• data-to="0" : Specifies the position within through the scrolling boundaries at which the animation starts and ends. 
• data-opacity="1" : Specifies the opacity of the animated element when scrolling arrives at the the to position.
• data-translatex="-200" : Specifies the distance to translate the animated element along the X, Y & Z axis when scrolling arrives at the the to position.
• data-rotatez="90" : Specifies the angle of rotation of the animated element along the X, Y & Z axis when scrolling arrives at the the to position.
• data-scale="1" : Specifies the scale of the animated element when scrolling arrives at the the to position.

Change log:

2014-06-29

• update.

---

This awesome jQuery plugin is developed by nckprsn. For more Advanced Usages, please check the demo page or visit the official website.