Fade-in-Elements-Scroll

A jquery plugin to fade in elements on scroll

Description

This jquery plugin allows you to fade in elements as you scroll down the page.

Demo

• fadeDuration set to 1000 and fadePosition set to 25: http://jsfiddle.net/john23/e8wfk0gn/3/

Options

There are two options: "fadeDuration" and "fadePosition" which you can pass into the fadeInElements function. Fadeduration, like the name suggests, is just the time it takes your elements to fade in (ms). Fadeposition allows you to adjust when your elements fade in as you scroll down the page. It is given in a percentage of the window inner height. For instance, if you pass in "25" the elements will begin to fade in when they hit 25% of the window height from the bottom of the screen. All elements that are to fade in need their css opacity set to "0".

Usage

Script tag

<script src = "fadeInElements.js"></script>  

Javascript:

Basic usage:

$('yourElements').fadeInElements();  

options:

$('yourElements').fadeInElements({ 	fadeDuration: 5000,  	fadePosition: 25 });  

CSS:

yourelements {   opacity: 0; }