Lorem

ScrollMe is a jQuery plugin for adding simple scrolling effects to web pages. Scroll this page to see the effects unfold.

ipsum dolor sit amet, at pro fugit virtute laboramus, eirmod sadipscing qui at. Pri ne fugit oporteat. Has cu porro placerat, rebum etiam consulatu et mea. Cum ad voluptua ponderum salutatus, id quod aeterno sea. His an zril virtute detracto, no pri nemore assentior. Eos atqui labitur no, ea altera mediocrem constituto sit, mediocrem assueverit ne pri.

Mea cu maiorum omittam qualisque, vis ei saepe vivendo mediocrem, meis nusquam epicuri ne duo. Pri ex ceteros repudiare, illud utamur omittam in sea, persius admodum et has. Eu iusto deleniti vis, diam latine cu pro. An quo quidam malorum, ad libris deserunt pericula eos.


In

novum accusamus theophrastus vel, id mel libris scripta, vel ut albucius disputationi. Amet omnis adolescens eos ei. Consul sensibus in eos, ad pri exerci moderatius, at cum oblique phaedrum moderatius. Eam aeque molestie platonem et. Sit graece consequuntur cu, justo dignissim cum in.

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

Ne eos deleniti referrentur, per an odio suscipiantur, pro in noster deserunt concludaturque. Ea apeirian persecuti nam. Cum atqui invidunt dignissim no. Labore luptatum te eum, veri petentium vel in, discere fuisset nec ut. Magna persequeris ad duo, in qui solum graeco apeirian. Nisl modus accusamus te sea, ex nibh illum accusam cum.


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.
  • "span": 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

easing (optional)

Sets the easing function to apply to the animation.

  • "easeout": Starts abruptly and comes to a gradual stop (default).
  • "easein": Starts gradually and comes to an abrupt stop.
  • "easeinout": Starts and comes to a stop gradually.
  • "linear": No easing.
crop (optional)

Limits the effect scrolling boundaries to the boundaries of the document. Leaving the boundaries uncropped allows elements to remain unaffected by enter effects when they are near the top of the page or, vice versa, by exit effects near the bottom.

  • "true": Crops scrolling boundaries to fit within the document boundaries (default).
  • "false": Allows scrolling boundaries to exist outside the document boundaries.
opacity (optional)

Specifies the opacity of the animated element when scrolling arrives at the the to position.

Value: 0 – 1

scale, scalex, scaley & scalez (optional)

Specifies the scale of the animated element (optionally along the X, Y & Z axis) 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