|File Size:||5.33 KB|
|Official Website:||Go to website|
blurry.load.js is a super tiny jQuery plugin which uses CSS3 transitions and blur filter to create a 'blur' effect on your image when loading. You can use it as a cool animation effect for image lazy load.
How to use it:
1. Include the style sheet
blurry.load.css in the
blurry.load.js at the bottom of the webpage. The plugin relies on jQuery library so you need to load it first.
<script src="//code.jquery.com/jquery-2.2.0.min.js"></script> <script src="blurry.load.js"></script>
2. Insert small and large images into the
img tag like this:
<img class="image-blur" src="small.jpg" data-large="large.jpg" >
3. Just call the function on the
img tag and the plugin will do the rest.