jQuery Plugin For Element Fade/Slide Effects As You Scroll - FadeThis

FadeThis is a lightweight jQuery plugin used to create fade/slide animations when Html elements come in (or out of) the viewport.

How to use it:

1. Include the jQuery FadeThis plugin after JQuery javascript library in the page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="jquery.fadethis.js"></script>

2. Include the jQuery easing plugin for easing options.

<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>

3. Add a CSS class to your Html element to specify which animation you would like to use.

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

4. Call the plugin and you're done.

<script>
$(document).ready(function() {
$(window).fadeThis();
});
</script>

5 All the default options.

<script>
$(document).ready(function() {
$(window).fadeThis({
baseName:       "slide-",
speed:          500, // Animation speed in milliseconds.
easing:         "swing", // Animation easing.
offset:         0, // Scroll offset, allowing to fire fading a little after or before the element appear.
reverse:        true, // Make element disappear again when scrolled out, and fade again when scrolled in. 
distance:       50, // Element distance to its emplacement, before animation.
scrolledIn:     null, // Function to call when the element come in viewport. 
scrolledOut:    null // Function to call when the element go out of the viewport. 
});
});
</script>

Change log:

v1.0.2 (2014-07-21)

• Fix class selector

---

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