Jquery lazyView - Fades in content

Jun 22, 2014 in Animation 2986 views

Download

Overview
Documents

User Rating: 0/5 ( 0 votes)

Your Rating:

Jquery lazyView is a jQuery plugin that fades in content when viewed by the user.

Source: silvenga.github.io

1. INCLUDE CSS AND JS FILES

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

2. HTML

<body style="visibility: hidden">
    <div id="a1" class="slide"></div>
    <div id="a2" class="slide"></div>
    <div id="a3" class="slide"></div>
    <div id="a4" class="slide"></div>
</body>

3. JAVASCRIPT

$(document).ready(function () {
      // selection the HTML portion to lazyView. 
      // To ensure a smooth transition set the element's visibility to hidden
      $('body').lazyView();
});

JS Tutorial

Jquery lazyView - Fades in content

Related Articles