Awesome CSS loading animations for grid layout pictures

Today, I would like to share with you some cool CSS loading animations that have been created specifically for the grid layout of images. You can use these effects in your portfolio, blog or any page you want. Settings are simple. We used the following libraries to achieve this effect:

• normalize.css to replace the traditional CSS reset;
• Zurb Foundation creates a responsive grid;
• Masonry Create a dynamic grid layout;
• imagesloaded Check if the image is loaded;
• Infinite Scroll loads more images and appends them to the gallery.

Now, let's take a look at some of the actual code, which is what everyone wants to know!

Effect Demo Source Download

HTML Code

In fact, the HTML code is very simple, complex and creative part in the 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= "#" &  Gt;</a></li> <li class= "Masonry-item" ><a target= "_blank" href= "#" ></a></li> <li class= "Masonry-item" ><a targe t= "_blank" href= "#" ></a></li> <li class= "Masonry-item" >& Lt;a target= "_blank" href= "#/" ></a></li> <li class= "Masonry -item "><a target=" _blank "href=" # "></a></li> <li clas s= "Masonry-item" ><A target= "_blank" href= "#" ></a></li> <li class= "Masonry-ite M "><a target=" _blank "href=" # "></a></li> <li class=" M Asonry-item "><a target=" _blank "href=" # "></a></li> <l            I 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& gt;</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= "#" >& lt;/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 the animation effect, we take the 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

When the image is loaded, we add a CSS effect to the image, then we find and display the item and finally refresh the masonry layout. When the user scrolls the page, the infinite scroll plug-in will load more images and repeat the previous steps. The code is as follows:

JQuery (document). Ready (function ($) {//Replace ' Tada ' with a 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 $it EMS = $ (items). Hide (). imagesloaded (). Progress (Function (Instanc                        E, image) {var $image = $ (image.img). addclass (effect); var $item = $image. Parents (masonry_item_selector). Addclas            S (' Infinite-scroll-item ')                . Show ();                    $masonry. Masonry (' appended ', $item);            });    }); });

　　

Related articles that may be of interest to you

• Web development in a very practical 10 effects "source Download"
• Carefully selected excellent jquery Ajax page plug-ins and tutorials
• 12 Amazing ideas for 404 error page Design
• Let the website Move! 12 Excellent jQuery animation plugins
• Stunning 8 x HTML5 & JavaScript Effects

This article links to: to create a grid layout image of the super-cool CSS loading animation effect

Compilation Source: Dream Sky focus on front-end development technology sharing web design resources

This article comes from "Dream Sky (http://www.cnblogs.com/lhb25/)"

Awesome CSS loading animations for grid layout pictures