如果你看过三星企业设计中心网站，你肯定已经注意到了时尚的网格加载效果。每一项加载的时候，背景色会首先滑出，然后图像显现出来。滑动颜色表示图像，也就是说它是彩色图像的主色。
在这篇文章中，我们想向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder 来获得的图像的最突出的颜色来作为初始的加载背景色使用。
温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox 和 Safari 等现代浏览器中浏览。
另外，这个例子中我们不会去动态加载项目或图像，而是模拟在页面滚动的时候去显示。当然，在实际情况下可能是动态加载的内容，可以使用类似延迟加载（Lazy Loading）或无限滚动（Infinite Scrolling）插件实现。
我们使用一个无序列表显示网格。第一个列表项将有一个特殊的风格，我们给它添加样式类“title-box” ：
|
1
2
3
4
5
6
7
8
9
10
11 |
<section class="grid-wrap"> <ul class="grid swipe-right"
id="grid"> <li class="title-box"> </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。当加载页面时，我们想让可见的项目是已经显示的，当滚动的时候要触发动画效果。
初始的时候，元素都是隐藏的，当元素进入可视区域（Viewport），我们给元素添加动画类来出发元素的动画效果。
对于 Swipe Right 效果 ，我们将让窗帘元素的 translate 值为0 ，使得它从左侧移动到中心，然后我们将它再移动到右侧。通过设置 translate 值为50%和60% ，我们 让元素在中间过程停留了一下，不只是由左到右线性的移动：
|
1
2
3
4
5
6
7
8
9 |
/* 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轴：
|
1
2
3
4
5
6
7
8
9 |
/* 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); }} |
旋转效果实现原理也是一样的，就是把移动动画改为旋转，代码代码：
|
1
2
3
4
5
6
7
8
9 |
/* 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 来做一些控制，下面是核心部分的代码：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32 |
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/）】
时尚设计！三种奇特的网格加载效果【附源码下载】,布布扣,bubuko.com
原文：http://www.cnblogs.com/lhb25/p/the-design-samsung-grid-loading-effect.html