Submit your widget

very Cool Grid Loading Effect with jQuery

Created 4 years ago   Views 20349   downloads 3662    Author tympanus
very Cool  Grid Loading Effect with jQuery
View DemoDownload 57.4 KB
Share |

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="">Ryo Takemasa</a></h2>
		<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>
		<!-- ... -->


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: