jQuery Plugin For Scroll-triggered Fade In Effect - fadeInElements.js

File Size: 5.22 KB
Views Total: 2248
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
jQuery Plugin For Scroll-triggered Fade In Effect - fadeInElements.js

fadeInElements.js is a very small (~3kb) jQuery plugin that detects the scroll position and adds a fadeIn effect to specific elements as they scrolled into view. Based on jQuery fadeto() method that adjusts the opacity of the matched elements as you scroll down the page.

How to use it:

1. Include jQuery library and the jQuery fadeInElements.js script on the html page.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="fadeInElements.js"></script>

2. Add initial opacity to your fadein elements.

.item { opacity:0; }

3. Call the function on the fadein elements and done.

$('.item').fadeInElements();

4. Setup the fadein effect.

$('.item').fadeInElements({

  // the time it takes your elements to fade in
  fadeDuration: 2000,

  // adjust when your elements fade in as you scroll down the page
  fadePosition: 0
  
});

This awesome jQuery plugin is developed by Ryan8765. For more Advanced Usages, please check the demo page or visit the official website.