ScrollMe is a jQuery plugin for adding animated scrolling effects using jQuery. The plugin is very light weight and can add a variety of scroll effects like rotation, scaling, appear, disappear etc on scrolling of a page. ScrollMe can scale, rotate, translate and change the opacity of elements on the page with minimum configuration and addition of a small script into the page.
For working the animation a modern browser with css animation support is essential. That is this stuff will only work in browsers that support the corresponding CSS properties.
Usage of scrollme in a webpage is super simple. ScrollMe uses a simple declarative syntax: just include jQuery & scrollme.js, add some bits to your markup and ScrollMe will do the rest.
<div class="scrollme"> <div class="animateme" data-when="enter" data-from="0.5" data-to="0" data-opacity="0" data-translatex="-200" data-rotatez="90" > Yup, that's all. </div> </div>
The scrollme class works as a container for animated elements. The progression of the animations is based on the scrolling through this element.
The animateme class defines the animated elements. Any number of these can be added within a container element. These elements also take the options that describe how and when the animation occurs.
Scroll Me Options
Options are added as attributes to scrollme elements with the data- prefix.
when
Determines when the scrolling boundaries start and end.
“Enter”: From when the top of the container enters the viewport to when it exits.
“Exit”: From when the bottom of the container enters the viewport to when it exits.
“View”: From when the top of the container enters the viewport to when the bottom exits.
from & to
Specifies the position within through the scrolling boundaries at which the animation starts and ends. The animated properties are set to their default value up to the from position then transition to the value defined in the options as scrolling progresses to the to position.
It is important to note that the from value can be larger than the to value. This would typically be the case if elements are being animated as they enter the viewport.
Value: 0 – 1
opacity (optional)
Specifies the opacity of the animated element when scrolling arrives at the the to position.
Value: 0 – 1
scale (optional)
Specifies the scale of the animated element when scrolling arrives at the the to position.
Value: Scaling factor
rotatex, rotatey & rotatez (optional)
Specifies the angle of rotation of the animated element along the X, Y & Z axis when scrolling arrives at the the to position.
Value: angle of rotation in degrees
translatex, translatey & translatez (optional)
Specifies the distance to translate the animated element along the X, Y & Z axis when scrolling arrives at the the to position.
Value: distance in pixels
By using scrollme it is very simple to create beautiful scrolling animation webpage with jquery.
- Everything You Need to Know About the CSS Property (dev.opera.com)
- Slide In (as you scroll down) Boxes (css-tricks.com)
- How to Design Animated Sliding Page Elements With CSS (designshack.net)
- How Eyetracking Can Improve Your Webpage Design (shutterstock.com)
- Show HN: Velocity.js – Accelerated JavaScript animation (julian.com)
- 33 Enticing Scrolling Effects JQuery Plugins (smashingapps.com)
- 7 jQuery Plugins To Create Page Scrolling (smashingapps.com)
- 13 Best Free jQuery Plugins of April 2014 (designzum.com)
- Parallax Scrolling Scripts and Plugins (impressivewebs.com)
- Creating Scrolling Parallax Effects with CSS (davidwalsh.name)