Download
User Rating: 0/5 ( 0 votes)
ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages.
As you scroll down the page ScrollMe can scale, rotate, translate and change the opacity of elements on the page. It's easy to set up and not a single line of javascript is required.
Why just these properties? Because browsers can animate them quickly, keeping scrolling silky smooth.
ScrollMe isn't
-
An excuse to add a bajillion scrolling effects to your pages. Use it sparingly or performance will suffer.
-
A framework for building sites like this or this. ScrollMe is less complex than that; it's just for adding that little something extra.
-
A magic wand. This stuff will only work in browsers that support the corresponding CSS properties.
Source: scrollme.nckprsn.com
1. INCLUDE JS FILES
<script src='http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js'></script>
<script src='js/jquery.scrollme.js'></script>
2. HTML
<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>
Two classes are used to define the elements that ScrollMe works with: scrollme & animateme.
The scrollme class defines 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.
3. 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 toposition.
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 theto position.
Value: distance in pixels
JS Tutorial
