Allows you to create superb CSS loading animations for grid layout images.

Allows you to create superb CSS loading animations for grid layout images.

Today, I want to share with you some cool images specially designed for grid layout.CSSLoad the animation effect. You can use these effects in your portfolio, blog, or any web page you want. The setting is simple. We use the following tool libraries to achieve this effect:

• Normalize.cssTo replace the traditional CSS reset;
• ZURB FoundationCreate a responsive grid;
• MasonryCreate a dynamic grid layout;
• ImagesLoadedCheck whether images are loaded;
• Infinite ScrollLoad more images and append them to the gallery.

Now, let's take a look at some actual code. This should be what everyone wants to know!

 

 

Download demo source code

 

HTML code

In fact, HTML code is very simple, and the complicated and creative part is in CSS. The Code is as follows:

<div class="row">    <div class="large-12 columns main">        <ul class="small-block-grid-2 medium-block-grid-3 large-block-grid-3 masonry">            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#/"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#/"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>            <li class="masonry-item"><a target="_blank" href="#"></a></li>        </ul>        <ul class="pagination">            <li><a class="next" href="index-02.php">Next Page</a></li>        </ul>        <div class="loading"></div>    </div><!-- End .main --></div><!-- End .row -->

CSS code

The CSS part is mainly animation effect. We take tada effect as an example:

@keyframes tada{    0%    {        -webkit-transform: scale(1);           -moz-transform: scale(1);            -ms-transform: scale(1);             -o-transform: scale(1);                transform: scale(1);    }    10%,    20%    {        -webkit-transform: scale(.8) rotate(-2deg);           -moz-transform: scale(.8) rotate(-2deg);            -ms-transform: scale(.8) rotate(-2deg);             -o-transform: scale(.8) rotate(-2deg);                transform: scale(.8) rotate(-2deg);    }    30%,    50%,    70%,    90%    {        -webkit-transform: scale(1.04) rotate(2deg);           -moz-transform: scale(1.04) rotate(2deg);            -ms-transform: scale(1.04) rotate(2deg);             -o-transform: scale(1.04) rotate(2deg);                transform: scale(1.04) rotate(2deg);    }    40%,    60%,    80%    {        -webkit-transform: scale(1.04) rotate(-2deg);           -moz-transform: scale(1.04) rotate(-2deg);            -ms-transform: scale(1.04) rotate(-2deg);             -o-transform: scale(1.04) rotate(-2deg);                transform: scale(1.04) rotate(-2deg);    }    100%    {        -webkit-transform: scale(1) rotate(0);           -moz-transform: scale(1) rotate(0);            -ms-transform: scale(1) rotate(0);             -o-transform: scale(1) rotate(0);                transform: scale(1) rotate(0);    }}.tada{    -webkit-animation-name: tada;       -moz-animation-name: tada;            animation-name: tada;}

JQuery

After the image is loaded in, we add the CSS effect to the image, find and display the project, and refresh the Masonry layout. When you scroll through the page, the unlimited scrolling plug-in will load more images and repeat the previous steps. The Code is as follows:

jQuery(document)    .ready(function($) {        // Replace "tada" with an effect from the "effects.css" file.        var effect = 'animate tada';        var masonry_selector = '.masonry';        var masonry_item_selector = '.masonry-item';        // Initialize Masonry.        var $masonry = $(masonry_selector)            .masonry({                itemSelector: masonry_item_selector            });        // Find and hide the items.        var $masonry_items = $masonry            .find(masonry_item_selector)            .hide();        // Wait for the images to load.        $masonry            .imagesLoaded()            // An image has been loaded.            .progress(function(instance, image) {                // Add the effect.                var $image = $(image.img)                    .addClass(effect);                // Find and show the item.                var $item = $image                    .parents(masonry_item_selector)                    .show();                // Lay out Masonry.                $masonry                    .masonry();            });        // Load more items.        $masonry            .infinitescroll({                navSelector: '.pagination',                nextSelector: '.pagination .next',                itemSelector: masonry_item_selector,                loading: {                    finishedMsg: 'No more pages to load.',                    img: 'images/loader.gif',                    msgText: 'Loading the next page.',                    selector: '.loading'                }            }, function(items, data, url) {                var $items = $(items)                    .hide()                    .imagesLoaded()                    .progress(function(instance, image) {                        var $image = $(image.img)                            .addClass(effect);                        var $item = $image                            .parents(masonry_item_selector)                            .addClass('infinite-scroll-item')                            .show();                        $masonry                            .masonry('appended', $item);                    });            });    });

　　

Articles you may be interested in

• 10 useful results in Web development [Source Code download]
• Excellent jQuery Ajax paging plug-ins and tutorials carefully selected
• 12 amazing creative 404 error page Designs
• Let the website get started! 12 excellent jQuery animation plug-ins
• Amazing 8 HTML5 & JavaScript Special Effects

 

Link to this article: loading animation effects with superb CSS for grid layout Images

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources

This article from [dream sky (http://www.cnblogs.com/lhb25 )]

Css 950px grid layout border

Width does not contain border width.
When calculating the total width, all width should be included.

Many templates on the Internet have the css file gridcss.

This is a raster layout system; keywords raster Layout
For example, a webpage is generally divided into 12 copies.
Set the width and spacing of each grid in grid_1-grid_12. The width can also be replaced by the percentage.
In this way, you do not need to calculate the width of each block repeatedly. Of course, the premise is that you need to use this idea during design.
References
Www.3lian.com/edu/2012/09-05/36001.html
Www.linuxnote.org/css-grid-maker.php