Set distance, duration, easing, type, direction
Scroll HTML Elements (div, span, h1, h2, h3, h4, h5, h6, p, img, ul, ol, section, aside, etc)
Add a wrapping container for your elements and set its position to absolute or relative. <div style="position:relative; overflow:hidden; height:2500px; width:70%; margin-left:15%; "></div>
Add the "scrollit" class to any element you wish to scroll inside the wrapping container. Set the elements position to absolute and set the top and left positioning if using the "top" type for scrolling. <h3 class="scrollit" style="position:absolute; top:20%; left:5%;" data-scroll="0.5" data-duration="2600" data-easing="swing" data-type="margin-top" >Here is some text to scroll. </h3>
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-type="top" >Here is some text to scroll. </h3> - The CSS scrolling is more precise but does not scroll over time. When the scroll event is triggered the element will immediately move the desired amount.
I have set up extra spinning classes to use if you wish.
The spinning classes are used in a couple of the planet elements. Example ".spinright-20s" will rotate the element clockwise in 20 seconds in an infinite animation loop . Example ".spinleft-60s" will rotate the element counter clockwise in 60 seconds in an infinite animation loop.