very Cool Grid Loading Effect with jQuery

This is a tutorial on how to achieve the grid loading effect seen on the "Design Samsung" site. The effect will show a colored element sliding in first and then sliding out again, revealing the image.
The Markup
For our grid we’ll use an unordered list with a main wrapper. The first list item will have a special style, so we give it the class “title-box”:
<section class="grid-wrap"> <ul class="grid swipe-right" id="grid"> <li class="title-box"> <h2>Illustrations by <a href="http://ryotakemasa.com/">Ryo Takemasa</a></h2> </li> <li><a href="#"><img src="img/1.jpg" alt="img01"><h3>Kenpo News April 2014 issue</h3></a></li> <li><a href="#"><img src="img/2.jpg" alt="img02"><h3>SQUET April 2014 issue</h3></a></li> <li><!-- ... --></li> <!-- ... --> </ul> </section>
The CSS
Note that the CSS will not contain any vendor prefixes, but you will find them in the files.
First, we need to style the main container which we’ll restrict to a maximum width of 1260 pixel (so that we fit a maximum of four items in a row):
.grid-wrap { clear: both; margin: 0 auto; padding: 0; max-width: 1260px; }
Read more:http://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/
You might also like
Tags
accordion accordion menu animation navigation animation navigation menu buttons carousel checkbox inputs css3 css3 menu css3 navigation date picker dialog drag drop drop down menu drop down navigation menu elastic navigation form gallery glide navigation horizontal navigation menu hover effect image gallery image hover image lightbox image scroller image slideshow multi-level navigation menus rating select dependent select list slide image slider menu stylish form table tabs text effect text scroller tooltips tree menu vertical navigation menu