Download the plugin here : https://github.com/lwiesel/jquery-fadethis/archive/master.zip
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>
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:
<div class="slide-left"></div>
<div class="slide-right"></div>
<div class="slide-top"></div>
<div class="slide-bottom"></div>
$(window).fadeThis({speed: 1000});
<div class="slide-left"></div>
$('.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!
$(…).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.
Animation speed in milliseconds.
Element distance to its emplacement, before animation.
Scroll offset, allowing to fire fading a little after or before the element appear.
Animation easing.
If you're using custom easing, you may need to also use jQuery Easing.
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.
Base class name for target elements.
Function to call when the element come in viewport.
This function is always called, even if reverse is set to false.
Function to call when the element go out of the viewport.
This function is always called, even if reverse is set to false.
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 :
