WordPress – Scroll-It For WordPress – Scroll Page Elements | CodeCanyon

Scroll-It For WordPress Scroll Page Elements his title this type of WordPress/Miscellaneous This time I will review,made by NuvuScripts, WordPress/Miscellaneous is sold at a price of $15 in themeforest.



animate // bottom // down // element // html // movement // parallax // scroll // scrollbar // scrolling // top // up //

Scroll Any Element On The Page Up Or Down When The Page Scrolls.

Set distance, duration, easing, type, direction

Scroll HTML Elements (p, 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.

Related produck This user:NuvuScripts

More items by NuvuScripts