Submit your widget

Like "Design Samsung" site grid loading effect

Created 4 years ago   Views 20731   downloads 2890    Author tympanus
Like "Design Samsung" site grid loading effect
View DemoDownload 47.2 KB
46
Share |

This tutorial wil tell you 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.

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>

Each list item contains an anchor with an image and a title. Note that we’ll control which type of animation will be used by giving the unordered list one of the three classes swipe-right, swipe-down or swipe-rotate.

When loading the page, we will want the visible items to be shown already and then, when we scroll, we want to trigger our animation. This will be achieved by giving the class animate to the apparently loading list item. The initially visible items will get the class shown and so will the items that finished their animation.

Read more:http://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/