ScrollFade

Notes:

• To use this plugin, call the .scrollFade() function on any jQuery element. It should probably only be used on below the fold content that the user will scroll to, but you can play around with it to see what you like.

• Put all of your scrollFade calls inside the $(window).load() function. Its important that this plugin loads after everything else on the page (including other JavaScript) has loaded.

• If the element you use this function on has other css animations, they will be disabled until after the .scrollFade() function has completed.

• You can pass parameters to change the functionality of the plugin, they are passed as an object with {key: value} pairs inside the plugin function.

Example of basic usage:

$(window).load(function() {    $('.someObject').scrollFade(); });

Instructions for optional parameters:

There are 5 optional parameters.

triggerElement: this is any valid css selector. If you are going to animate items sequentially or as a group this is the element that must rise above the 'visibleDistance' (see below) to trigger the element. The default is self (the the item that the function has been called on).

Example:

$(window).load(function() {    $('.featuredContent > img').scrollFade({       triggerElement: '.featuredContent'    }); });

duration: the duration of the fade in animation in seconds passed as a number. Default is 0.5 seconds.

Example:

$('.featuredContent > img').scrollFade({    duration: 0.25 });

useDelay: a boolean (true or false) that tells the plugin whether to stagger the animation of children elements. If it's false, then the elements will load simultaneously, if it's true they will load one at a time. Default is false.

Example:

$(window).load(function() {    $('.featuredContent > img').scrollFade({       duration: 0.25    }); });

delayIncrement: the amount of time to delay the animation of children elements of the same parent. AKA: Staggering of animation from first to last item. It should be passed as a number (only valid if useDelay is true). Default is 0.5 seconds.

Example:

$(window).load(function() {    $('.featuredContent > img').scrollFade({       delayIncrement: 0.75    }); });

visibleDistance: the distance from the bottom of the screen and element must be to start the fade in animation passed as a number. This number is in VH units (percent of the screen height), to accommodate smaller screens - pixels would cause a problem on smaller screen. Passing 50 would start the animation once the 'triggerElement' reaches the middle of the screen. Passing 0 would start at the very bottom of the screen. The default is 30.

Example:

$(window).load(function() {    $('.featuredContent > img').scrollFade({       visibleDistance: 20    }); });

mediaQuery: the screen size above which this plugin will work. Passed as a number. The default is 0; it will work on all screen sizes.

Example:

$(window).load(function() {    $('.featuredContent > img').scrollFade({       mediaQuery: 841    }); });