jQuery Plugin To Fade In Elements When They Enter The Viewport - Lazy View

Lazy View is a super tiny jQuery plugin to smoothly fade in Html elements as they come into view, a little similar to the content lazy loading effects.

How to use it:

1. Insert the Html elements in a container. To ensure a smooth transition set the element's visibility to hidden.

<div class="demo" style="visibility: hidden">

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

</div>

2. Include the jQuery Lazy View plugin and other resources in the document.

<link rel="stylesheet" href="jquery.lazyView.css" />
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="jquery.lazyView.js"></script> 

3. To initialize the plugin, simply call the function on the parent container element.

$(document).ready(function () {
$('.demo').lazyView();
});

Change log:

2014-06-30

• Speed fixes for IE and Firefox.

---

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