Creative Grid Loading Effect
[Demo/Download] 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>
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, swipedown 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. The colored element that will swipe to reveal the image, will be added dynamically. We’ll use a div that we’ll insert into the anchor, right after the title. The division will have the class curtain and we’ll set the background color to the most prominent one that we discovered using the ColorFinder script. Let’s take a look at the style. 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; }
The unordered list will be centered and we’ll remove the default list styling: .grid {
}
margin: 30px auto; padding: 0; min-height: 500px; list-style: none;
If we have JavaScript enabled, we want the grid visibility to be controlled by our script. We’ll use the class loaded, which we set once the grid is ready, to control a loading indicator and the visibility of the items. .js .grid { }
background: url(../img/loading.gif) no-repeat 50% 100px; .js .grid.loaded { background: none; }
We do that so that we don’t show anything until the grid images are actually loaded. The list items will float left and have a width of 314 pixel (image width plus the margin of the anchor) if we have JavaScript. If not, we’ll simply set the items as inline-block elements and align them to the top: .grid li { display: inline-block; overflow: hidden; width: 314px; text-align: left; vertical-align: top; } .js .grid li { }
display: none; float: left; .js .grid.loaded li { display: block; }
Let’s give some special styling to the title: .title-box h2 { display: block; margin: 7px; padding: 20px; background: #2E3444; color: #D3EEE2; text-transform: uppercase; letter-spacing: 1px; font-weight: 300; } .title-box h2 a { display: block; font-weight: 900; } .title-box h2 a:hover { color: #D3EEE2; }
Let’s set some styles for the anchor and the image: .grid li > a, .grid li img { display: block; outline: none;
}
border: none;
The anchor needs to have its overflow hidden because we want to move the colored element without it peeking out: .grid li > a { position: relative; overflow: hidden; margin: 7px; }
The curtain element will be positioned absolutely and weâ&#x20AC;&#x2122;ll set it to full width and height:
[Demo/Download]