Scroll It Demo

scroll-it

Untitled-4

earth
saturn
the_red_planet

puff3
puff2
puff1
rocket_red
updown
scrollitlogo
scrollitlogo
scrollitlogo
scrollitlogo
scrollitlogo
scrollitlogo
astronaut_by_oxygenhazard-d4mr1sz
astronaut_by_oxygenhazard-d4mr1sz

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:

  1. Add a wrapping container for your elements and set its position to absolute or relative. <div style=”position:relative; overflow:hidden; height:2500px; width:100%; margin-left:0%; “></div>

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

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


Extra Classes For Spinning Elements

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.

  • .spinright-1s
  • .spinright-5s
  • .spinright-10s
  • .spinright-15s
  • .spinright-20s
  • .spinright-30s
  • .spinright-40s
  • .spinright-50s
  • .spinright-60s
  • .spinleft-1s
  • .spinleft-5s
  • .spinleft-10s
  • .spinleft-15s
  • .spinleft-20s
  • .spinleft-30s
  • .spinleft-40s
  • .spinleft-50s
  • .spinleft-60s

Recent Posts

  1. Epic Battles – Endless Fun 224 Replies
  2. Oblivion 191 Replies
  3. Badger 268 Replies
  4. Custom Featured HTML 1,098 Replies
  5. Defiance Game 8,303 Replies
  6. Force Be With Thee 188 Replies
  7. Panda Time 193 Replies
  8. Sharks 180 Replies
  9. Paw Paw Paw 213 Replies