Scroll Any Element On The Page Up Or Down When The Page Scrolls.
Set distance, duration, easing, type, direction
Scroll HTML Elements (div, span, h1, h2, h3, h4, h5, h6, p, img, ul, ol, section, aside, etc)
Options:
Set the data options for the movement amount, direction, type, speed and easing.
<h3 class="scrollit" style="position:absolute; top:20%; left:5%;" data-scroll="0.5" data-duration="2600" data-easing="swing" data-type="top">Here is some text to scroll. </h3>
-
data-type=”top” – The data-type property is the style propety to apply the scroll to. Can be “top”, “bottom”, “margin-top” and “margin-bottom”. When scrolling by margin-top and margin-bottom set the scrollit element to a relative position.
-
data-scroll=”0.5” – The data-scroll property is the amount to scroll “0.5” is equal to 1/2 percent of the elements height per scroll.
-
data-direction=”up” – The data-direction property is direction to scroll when scrolling down the page. It can be “up” or “down”. If set to “up” the element will scroll up when scrolling down the page and down when scrolling up the page.
-
data-duration=”1000” – The data-duration property is speed of the scrolling if using as animation. “2000” is 2 seconds or 2000 milliseconds.
-
data-easing=”swing” – The data-easing property is the scroll animation easing. Can be any jquery easing “swing” is default. See http://jqueryui.com/resources/demos/effect/easing.html for all options.
-
no-animate – Using a CSS scroll instead of an animation scroll is as easy as adding the “no-animate” class to the scrollit element like so:
<h3 class="scrollit no-animate" style="position:absolute; top:20%; left:5%;" data-scroll="0.5" data-direction="up" data-duration="2000" data-type="top">Here is some text to scroll. </h3>
It is beneficial if you have some html experience to use this plugin. It requires you to add elements to the page and set positions and styles.