Amazing Loading Effects for Grid Layout with CSS3 Animations

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.