FadeThis

lightweight jQuery plugin
for fade-as-you-scroll features

Installation

or use the Bower Component available by taping:
bower install jquery-fadethis

Then, include the script after jQuery. Requires jQuery 1.4+.
<script src="jquery.js"></script>
<script src="jquery.fadethis.min.js"></script>

Basic usage

Add this before the body closing tag:
<script>$(window).fadeThis();</script>
and add one of the following classes to the elements you want to target:

Appear from left

<div class="slide-left"></div>

Appear from right

<div class="slide-right"></div>

Appear from top

<div class="slide-top"></div>

Appear from bottom

<div class="slide-bottom"></div>

Advanced usage

Set configuration for the whole page

$(window).fadeThis({speed: 1000}); <div class="slide-left"></div>

Set configuration per block

$('.block').fadeThis({speed: 1000}); <div class="block">
    <div class="slide-left"></div>
</div>

When defining elements options, the rule is First come, first served. The options set for a block doesn't override previous block options adressing the same elements, or page options. So if you use block options definition, don't use $(window).fadeThis() before!

Set configuration per element using HTML5 data attributes

$(…).fadeThis(…); <div class="slide-right" data-plugin-options='{"speed":200, "distance":400}'></div>

The options set by data attributes override any other options set per block.

Note the position and order of the quotation mark for the data attribute.
For some browsers, reverting this order may cause misunderstanding of the options.

Configuration

speed

default: 500

Animation speed in milliseconds.

distance

default: 50

Element distance to its emplacement, before animation.

offset

default: 0

Scroll offset, allowing to fire fading a little after or before the element appear.

easing

default: "swing"

Animation easing.

If you're using custom easing, you may need to also use jQuery Easing.

reverse

default: true

Make element disappear again when scrolled out, and fade again when scrolled in.
Set this to false if you want elements to stay on page after they appear once.

baseName

default: "slide-"

Base class name for target elements.

scrolledIn

default: null

Function to call when the element come in viewport.
This function is always called, even if reverse is set to false.

scrolledOut

default: null

Function to call when the element go out of the viewport.
This function is always called, even if reverse is set to false.

Supported Browsers

If you use jQuery 1.x, you're safe using jQuery.FadeThis on these browsers :

If you use jQuery 2.x, you're safe using jQuery.FadeThis on these browsers :