為網格布局圖片打造的超炫 CSS 載入動畫

標籤：style   blog   http   io   使用   java   ar   strong   for   

　　今天，我想與大家分享一些專門為網格布局的映像製作的很酷的 CSS 載入動畫效果。您可以把這些效果用在你的作品集，部落格或任何你想要的網頁中。設定很簡單。我們使用了下面這些工具庫來實現這個效果：

• Normalize.css 來替代傳統的 CSS 複位；
• ZURB Foundation 建立具有響應式的網格；
• Masonry 建立一個動態網格布局；
• imagesLoaded 檢查是否已載入映像；
• Infinite Scroll 載入更多圖片並追加到畫廊。

　　現在，讓我們來看看一些實際的代碼，這應該是大家最想知道的！

 

 

效果示範      源碼下載

 

HTML 程式碼

其實 HTML 程式碼都是很簡單的，複雜和創意的部分在 CSS。代碼如下：

<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="#"><img src="images/01.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/02.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/03.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/04.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#/"><img src="images/05.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/06.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/07.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/08.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/09.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/10.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/11.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/12.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#/"><img src="images/13.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/14.jpg"  /></a></li>            <li class="masonry-item"><a target="_blank" href="#"><img src="images/15.jpg"  /></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 代碼

CSS 部分主要是動畫效果，我們以 tada 效果為例：

@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

當映像被載入進來後，我們給映像添加上 CSS 效果，然後我們找到並顯示該項目，最後會重新整理 Masonry 布局。當使用者滾動頁面的時候，無限滾動外掛程式將裝載更多的映像並重複前面的步驟。代碼如下：

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);                    });            });    });

　　

您可能感興趣的相關文章

• Web 開發中很實用的10個效果【源碼下載】
• 精心挑選的優秀jQuery Ajax分頁外掛程式和教程
• 12個讓人驚歎的的創意的 404 錯誤頁面設計
• 讓網站動起來！12款優秀的 jQuery 動畫外掛程式
• 十分驚豔的8個 HTML5 & JavaScript 特效

 

本文連結：為網格布局圖片打造的超炫 CSS 載入動畫效果

編譯來源：夢想天空 ◆ 關注前端開發技術 ◆ 分享網頁設計資源

本文來自【夢想天空（http://www.cnblogs.com/lhb25/）】

為網格布局圖片打造的超炫 CSS 載入動畫