如果你看過三星企業設計中心網站，你肯定已經注意到了時尚的網格加載效果。每一項加載的時候，背景色會首先滑出，然后圖像顯現出來。滑動顏色表示圖像，也就是說它是彩色圖像的主色。
在這篇文章中，我們想向您展示了如何使用 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 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>
每個列表項包含一個圖像和一個標題的錨。請注意，我們將控制哪些動畫的類型將被用於給無序列表的三種 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.cnblogs.com/lhb25/）】