Amazing Loading Effects for Grid Layout with CSS3 Animations
File Size: | 454 KB |
---|---|
Views Total: | 15244 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

In this post written by MARY LOU we're going to create a responsive grid layout with amazing CSS3 loading effects. Please check the demo page to see it in action.
How to use it:
1. Markup html structure
<ul class="grid effect-1" id="grid"> <li><a href="#"><img src="images/1.jpg"></a></li> <li><a href="#"><img src="images/2.jpg"></a></li> <li><a href="#"><img src="images/3.jpg"></a></li> <li><a href="#"><img src="images/4.jpg"></a></li> <li><a href="#"><img src="images/5.jpg"></a></li> <li><a href="#"><img src="images/6.jpg"></a></li> <li><a href="#"><img src="images/7.jpg"></a></li> <li><a href="#"><img src="images/8.jpg"></a></li> <li><a href="#"><img src="images/9.jpg"></a></li> ... </ul>
2. Load necessary javascript library files on the page
<script src="js/masonry.pkgd.min.js"></script> <script src="js/imagesloaded.js"></script> <script src="js/classie.js"></script> <script src="js/AnimOnScroll.js"></script>
3. The CSS for the layout
.grid { max-width: 69em; list-style: none; margin: 30px auto; padding: 0; } .grid li { display: block; float: left; padding: 7px; width: 33%; opacity: 0; } .grid li.shown, .no-js .grid li, .no-cssanimations .grid li { opacity: 1; } .grid li a, .grid li img { outline: none; border: none; display: block; max-width: 100%; } .grid.effect-1 li.animate { -webkit-animation: fadeIn 0.65s ease forwards; -moz-animation: fadeIn 0.65s ease forwards; animation: fadeIn 0.65s ease forwards; } @-webkit-keyframes fadeIn { to { opacity: 1; } } @-moz-keyframes fadeIn { to { opacity: 1; } } @keyframes fadeIn { to { opacity: 1; } } @media screen and (max-width: 900px) { .grid li { width: 50%; } } @media screen and (max-width: 400px) { .grid li { width: 100%; } }
4. Initialization
<script> new AnimOnScroll( document.getElementById( 'grid' ), { minDuration : 0.4, maxDuration : 0.7, viewportFactor : 0.2 } ); </script>
This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.