very Cool Grid Loading Effect with jQuery

Home Layout & Interfacevery Cool Grid Loading Effect with jQuery

very Cool Grid Loading Effect with jQuery

4 years ago Views

18876

3408

tympanus

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;
}

Tag: Loading Effect