時尚設計！三種奇特的網格加載效果【附源碼下載】

如果你看過三星企業設計中心網站，你肯定已經注意到了時尚的網格加載效果。在這篇文章中，我們想向您展示了如何使用 Masonry 網格砌體插件，結合 CSS 動畫重現這種效果。另外在這里，我們還借助了 ColorFinder 來獲得的圖像的最突出的顏色來作為初始的加載背景色使用。

　　如果你看過三星企業設計中心網站，你肯定已經注意到了時尚的網格加載效果。每一項加載的時候，背景色會首先滑出，然后圖像顯現出來。滑動顏色表示圖像，也就是說它是彩色圖像的主色。

　　在這篇文章中，我們想向您展示了如何使用 Masonry 網格砌體插件，結合 CSS 動畫重現這種效果。另外在這里，我們還借助了 ColorFinder 來獲得的圖像的最突出的顏色來作為初始的加載背景色使用。

立即下載在線演示

　　溫馨提示：為保證最佳的效果，請在 IE10+、Chrome、Firefox 和 Safari 等現代瀏覽器中瀏覽。

　　另外，這個例子中我們不會去動態加載項目或圖像，而是模擬在頁面滾動的時候去顯示。當然，在實際情況下可能是動態加載的內容，可以使用類似延遲加載（Lazy Loading）或無限滾動（Infinite Scrolling）插件實現。

HTML

　　我們使用一個無序列表顯示網格。第一個列表項將有一個特殊的風格，我們給它添加樣式類“title-box” ：

<section class="grid-wrap">
    <ul class="grid swipe-right" id="grid">
        <li class="title-box">
            <h2>Illustrations by <a >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>

　　每個列表項包含一個圖像和一個標題的錨。請注意，我們將控制哪些動畫的類型將被用于給無序列表的三種 Class，swipe-right，swipe-down 或者 swipe-rotate。當加載頁面時，我們想讓可見的項目是已經顯示的，當滾動的時候要觸發動畫效果。

CSS

　　初始的時候，元素都是隱藏的，當元素進入可視區域（Viewport），我們給元素添加動畫類來出發元素的動畫效果。

　　對于 Swipe Right 效果，我們將讓窗簾元素的 translate 值為0 ，使得它從左側移動到中心，然后我們將它再移動到右側。通過設置 translate 值為50%和60% ，我們讓元素在中間過程停留了一下，不只是由左到右線性的移動：

/* Swipe right */
.grid.swipe-right li.animate .curtain {
    animation: swipeRight 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}
 
@keyframes swipeRight {
    50%, 60% { transform: translate(0); }
    100% { transform: translate3d(100%,0,0); }
}

　　這里之所以使用 translate(0) 是因為在一些瀏覽器（例如 IE11），translate3d(0,0,0) 在這種情況下會有問題。

　　Swipe Down 效果基本類似，只是把Y軸替換為X軸：

/* Swipe down */
.grid.swipe-down li.animate .curtain {
    animation: swipeDown 1.5s cubic-bezier(0.6,0,0.4,1) forwards;
}
 
@keyframes swipeDown {
    50%, 60% { transform: translate(0); }
    100% { transform: translate3d(0,-100%,0); }
}

　　旋轉效果實現原理也是一樣的，就是把移動動畫改為旋轉，代碼代碼：

/* Swipe rotate */
.grid.swipe-rotate li.animate .curtain {
    animation: swipeRotate 1.5s ease forwards;
}
 
@keyframes swipeRotate {
    50%, 60% { transform: rotate3d(0,0,1,0deg); }
    100% { transform: rotate3d(0,0,1,-90deg); }
}

　　樣式部分，上面的動畫效果代碼就是核心部分了。

JavaScript

　　這個效果稍微有點復雜，因此還需要 JavaScript 來做一些控制，下面是核心部分的代碼：

GridScrollFx.prototype._scrollPage = function() {
    var self = this;
    this.items.forEach( function( item ) {
        if( !classie.has( item.el, 'shown' ) && !classie.has( item.el, 'animate' ) && inViewport( item.el, self.options.viewportFactor ) ) {
            ++self.itemsRenderedCount;
 
            if( !item.curtain ) {
                classie.add( item.el, 'shown' );
                return;
            };
 
            classie.add( item.el, 'animate' );
             
            // after animation ends add class shown
            var onEndAnimationFn = function( ev ) {
                if( support.animations ) {
                    this.removeEventListener( animEndEventName, onEndAnimationFn );
                }
                classie.remove( item.el, 'animate' );
                classie.add( item.el, 'shown' );
            };
 
            if( support.animations ) {
                item.curtain.addEventListener( animEndEventName, onEndAnimationFn );
            }
            else {
                onEndAnimationFn();
            }
        }
    });
    this.didScroll = false;
}

　　在上面的代碼中，我們給進入可視區域的元素添加動畫類以觸發動畫效果，在動畫結束的回調時間中刪除綁定的事件以及動畫類，這樣就能達到我們要的效果了。　

立即下載在線演示

您可能感興趣的相關文章

本文鏈接：奇特的網格加載效果【附源碼下載】 via codrops

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

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