If you already come across the Samsung Corporate Design Center, you certainly have noticed the stylish grid loading effect. The colored background of an item slides in first and when it slides out again to the opposite side, the image is revealed. The color of the sliding element represents the image, i.e. it is colored in the dominant color of the picture. This is a great grid loading effect and after we got a request on how to achieve this, we’d like to show you how to recreate this effect using a Masonry grid with CSS animations. We’ll also make use of the ColorFinder script by pieroxy that will get the most prominent color of an image for us.

如果您已经碰到过三星企业设计中心，那么您肯定已经注意到了时尚的网格加载效果。 物品的彩色背景先滑入，然后再次滑出到另一侧时，图像就会显示出来。 滑动元素的颜色表示图像，即以图片的主要颜色进行着色。 这是一个很棒的网格加载效果，在我们要求实现此效果之后，我们将向您展示如何使用带有CSS动画的Masonry网格来重新创建此效果。 我们还将使用Pieroxy的ColorFinder脚本，它将为我们提供图像的最突出颜色。

The idea is to load grid images showing a swiping animation of a colored element first. For that we’ll dynamically add a division that we’ll color with the most prominent color of the associated image and then we’ll animate that element to reveal the image. We’ll add an animation that looks like the one seen on the Samsung site and we’ll also add two more, a swipe to the bottom and a swipe rotation.

这个想法是首先加载显示彩色元素滑动动画的网格图像。 为此，我们将动态添加一个分区，该分区将使用关联图像的最突出颜色进行着色，然后为该元素设置动画以显示图像。 我们将添加一个动画，外观类似于在三星网站上看到的动画，还将添加两个动画，即底部滑动和旋转旋转。

We’ll not load items or images dynamically, instead we’ll simulate their appearance on scroll. Of course, in real cases with dynamically loading content you might use something like lazy loading or infinite scrolling.

我们不会动态加载项目或图像，而是在滚动时模拟它们的外观。 当然，在实际情况下，动态加载内容可能会使用延迟加载或无限滚动之类的方法。

Note that this is for modern browsers only!

请注意，这仅适用于现代浏览器！

The beautiful artwork featured in the demos is by illustrator Ryo Takemasa. Check out his website, his Behance portfolio or his shop.

演示中展示的精美艺术品是插画家Ryo Takemasa 。 查看他的网站，他的Behance产品组合或他的商店。

So, let’s get started!

所以，让我们开始吧！

标记 (The Markup)

For our grid we’ll use an unordered list with a main wrapper. The first list item will have a special style, so we give it the class “title-box”:

对于我们的网格，我们将使用带有主包装的无序列表。 第一个列表项将具有特殊样式，因此我们将其指定为“ 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>

Each list item contains an anchor with an image and a title. Note that we’ll control which type of animation will be used by giving the unordered list one of the three classes swipe-right, swipe-down or swipe-rotate.

每个列表项都包含带有图像和标题的锚点。 请注意，我们将通过为无序列表提供三个类别之一，即向右滑动，向下滑动或向下旋转，来控制使用哪种类型的动画。

When loading the page, we will want the visible items to be shown already and then, when we scroll, we want to trigger our animation. This will be achieved by giving the class animate to the apparently loading list item. The initially visible items will get the class shown and so will the items that finished their animation.

加载页面时，我们希望已显示可见项，然后在滚动时希望触发动画。 这可以通过为类赋予明显的加载列表项动画来实现。 最初可见的项目将显示该类，完成动画的项目也将显示。

The colored element that will swipe to reveal the image, will be added dynamically. We’ll use a div that we’ll insert into the anchor, right after the title. The division will have the class curtain and we’ll set the background color to the most prominent one that we discovered using the ColorFinder script.

可以滑动以显示图像的彩色元素将被动态添加。 我们将使用一个div ，该div插入标题后。 该部门将使用类窗帘，我们将背景色设置为使用ColorFinder脚本发现的最突出的背景色。

Let’s take a look at the style.

让我们看一下样式。

CSS (The CSS)

Note that the CSS will not contain any vendor prefixes, but you will find them in the files.

请注意，CSS将不包含任何供应商前缀，但是您可以在文件中找到它们。

First, we need to style the main container which we’ll restrict to a maximum width of 1260 pixel (so that we fit a maximum of four items in a row):

首先，我们需要设置主容器的样式，将其限制为最大宽度为1260像素(以便我们最多可容纳四个项目)：

.grid-wrap {
clear: both;
margin: 0 auto;
padding: 0;
max-width: 1260px;
}

The unordered list will be centered and we’ll remove the default list styling:

无序列表将居中放置，我们将删除默认的列表样式：

.grid {
margin: 30px auto;
padding: 0;
min-height: 500px;
list-style: none;
}

If we have JavaScript enabled, we want the grid visibility to be controlled by our script. We’ll use the class loaded, which we set once the grid is ready, to control a loading indicator and the visibility of the items.

如果启用了JavaScript，则希望由脚本控制网格可见性。 我们将使用加载的类，这是我们设置一次网格是准备好了，来控制负载指标和项目的可见性。

.js .grid {
background: url(../img/loading.gif) no-repeat 50% 100px;
}.js .grid.loaded {
background: none;
}

We do that so that we don’t show anything until the grid images are actually loaded.

我们这样做是为了在实际加载网格图像之前不显示任何内容。

The list items will float left and have a width of 314 pixel (image width plus the margin of the anchor) if we have JavaScript. If not, we’ll simply set the items as inline-block elements and align them to the top:

如果我们有JavaScript，则列表项将向左浮动并具有314像素的宽度(图像宽度加上锚点的边距)。 如果没有，我们将简单地将项目设置为内联块元素并将它们对齐到顶部：

.grid li {
display: inline-block;
overflow: hidden;
width: 314px;
text-align: left;
vertical-align: top;
}.js .grid li {
display: none;
float: left;
}.js .grid.loaded li {
display: block;
}

Let’s give some special styling to the title:

让我们为标题添加一些特殊的样式：

.title-box h2 {
display: block;
margin: 7px;
padding: 20px;
background: #2E3444;
color: #D3EEE2;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 300;
}.title-box h2 a {
display: block;
font-weight: 900;
}.title-box h2 a:hover {
color: #D3EEE2;
}

Let’s set some styles for the anchor and the image:

让我们为锚点和图像设置一些样式：

.grid li > a,
.grid li img {
display: block;
outline: none;
border: none;
}

The anchor needs to have its overflow hidden because we want to move the colored element without it peeking out:

锚点需要隐藏其溢出，因为我们要移动有色元素而不会窥视它：

.grid li > a {
position: relative;
overflow: hidden;
margin: 7px;
}

The curtain element will be positioned absolutely and we’ll set it to full width and height:

幕布元素将绝对放置，我们将其设置为全宽和全高：

.grid .curtain {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #96cdc8;
}

The curtain will be on top of the image and the title, which is important for our effect to work.

窗帘将位于图像和标题的顶部，这对于我们的效果发挥至关重要。

The three effects will have the curtain coming from either left, top or rotated from the left:

这三种效果将使窗帘从左侧，顶部或从左侧旋转：

.grid.swipe-right .curtain {
transform: translate3d(-100%,0,0);
}.grid.swipe-down .curtain {
transform: translate3d(0,-100%,0);
}.grid.swipe-rotate .curtain {
width: 200%;
height: 200%;
transform: rotate3d(0,0,1,90deg);
transform-origin: top left;
}

For the rotate effect we’ll double the size of the element so that we don’t see any corners when the rotation is performed.

对于旋转效果，我们将元素的大小加倍，以便在执行旋转时看不到任何角。

Additionally, we’ll attach a pseudo element to the curtain, which will serve as shadow that will cover the image. Depending on the effect, we’ll attach the element either on the left or above it:

此外，我们将在窗帘上附加一个伪元素，该元素将作为覆盖图像的阴影。 根据效果，我们将元素附加在其左侧或上方：

.grid .curtain::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
content: '';
}.grid.swipe-right .curtain::after,
.grid.swipe-rotate .curtain::after {
left: -100%;
}.grid.swipe-down .curtain::after {
top: -100%;
}

The title will have a dark background color and it will be positioned absolutely:

标题将具有深色背景颜色，并且将绝对定位：

.grid li h3 {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
padding: 20px;
width: 100%;
background: #2E3444;
color: #D3EEE2;
text-align: right;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 800;
font-size: 1em;
transition: transform 0.2s, color 0.2s;
}

For the hover effect, we’ll play with the pseudo element ::before of the anchor. It will be a absolutely positioned element that will animate its border on hover. The title itself will move up a bit and change its color to white:

对于悬停效果，我们将在锚点之前使用伪元素:::。 这将是一个绝对定位的元素，将在悬停时为其边框设置动画。 标题本身将向上移动并将其颜色更改为白色：

.grid li > a::before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100.5%;
border: 0px solid transparent;
background: transparent;
content: '';
transition: border-width 0.2s, border-color 0.2s;
}/* Hover effects */
.grid li.shown:hover h3 {
color: #fff;
transform: translate3d(0,-30px,0);
}.grid li.shown:hover > a::before {
border-width: 14px;
border-color: #2E3444;
}

Now, let’s define the animations.

现在，让我们定义动画。

As seen previously, we’ve defined an initial “hidden” state to the curtain element, depending on which animation we’ll be using.

如前所述，我们已经根据要使用的动画定义了窗帘元素的初始“隐藏”状态。

When we scroll the page and an item “moves” into the viewport, we’ll apply the class animate to it and thereby trigger an animation.

当我们滚动页面并将一个项目“移动”到视口中时，我们将为其设置动画类，从而触发动画。

For the right swipe effect (the one we see on the Samsung page), we’ll let the curtain element translate to 0, making it move from the left side to the center, and then we’ll translate it out to the right side. By setting the 0 translate in 50% and 60%, we are making sure that the element stays a bit, and does not just swipe from left to right:

对于右滑动效果(我们在三星页面上看到的效果)，我们将窗帘元素转换为0，使其从左侧移动到中心，然后将其转换到右侧。 。 通过将0平移设置为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); }
}

(Why do we need to use translate(0) here? Well, some browsers, like IE11, seems to have some problem with translate3d(0,0,0) in this context…)

(为什么我们在这里需要使用translate(0)？嗯，在这种情况下，某些浏览器，例如IE11，似乎对translate3d(0,0,0)存在一些问题……)

The swipe down effect is almost the same, we just use the Y axis instead of the X axis:

向下滑动效果几乎相同，我们只使用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); }
}

The rotate effect follows the same principle, we just rotate instead of move the element:

旋转效果遵循相同的原理，我们只是旋转而不是移动元素：

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

The shadow pseudo-element will simply fade out from the moment that the curtain starts moving away, revealing the image:

从窗帘开始移开的那一刻起，阴影伪元素就会逐渐消失，从而显示出图像：

.grid li.animate .curtain::after {
animation: fadeOut 1.5s ease forwards;
animation-delay: inherit;
}@keyframes fadeOut {
50%, 60% { opacity: 1; }
100% { opacity: 0; }
}

Since we will be changing animation delays in our script, we need to make sure that our pseudo-element gets the same value as its parent element. This we can ensure with setting the animation-delay to inherit. While all other elements can have their delay re(defined) easily, it would have difficulties doing something to the pseudo-element with JS.

由于我们将在脚本中更改动画延迟，因此我们需要确保伪元素与其父元素具有相同的值。 这我们可以设置动画延迟，以确保inherit 。 虽然所有其他元素都可以轻松地重新定义其延迟，但是使用JS对伪元素做一些事情将很困难。

Last, but not least, we need to hide the image and title initially and only show it when we have reached 60% of our animation. By using the stepping function step-end, which is equivalent to steps(1, end), we can control the visibility and the exact moment, we make the image and the title visible. We need to use the same animation duration like previously so that we can set the visibility to visible at 60%, once the curtain starts moving out again, revealing the now visible image:

最后但并非最不重要的一点是，我们首先需要隐藏图像和标题，仅在达到动画的60％时才显示。 通过使用相当于steps(1, end)的步进功能step-end ，我们可以控制可见性和确切的时刻，使图像和标题可见。 我们需要使用同样的动画时间像以前这样我们就可以在60％设置能见度可见，一旦幕再次开始转动了，露出了现在可见的图像：

.js .grid li img,
.js .grid li h3 {
visibility: hidden;
}.grid li.animate img,
.grid li.animate h3 {
animation: showMe 1.5s step-end forwards;
}@keyframes showMe {
from { visibility: hidden; }
60%, 100% { visibility: visible; }
}.grid li.shown img,
.grid li.shown h3 {
visibility: visible;
}

To understand this specific stepping function, check out the brilliant example by Lea Verou: Pure CSS3 typing animation with steps().

要了解此特定的步进功能，请查看Lea Verou的出色示例：纯净CSS3输入的带有steps()的动画。

Let’s have a look at the JavaScript.

让我们看一下JavaScript。

JavaScript (The JavaScript)

What we want to do is to show our items when we scroll them into the viewport. Each appearing item will get an animation class that will trigger our previously defined animations. We don’t want the animation to be performed on the first item in our grid, so we’ll simply show them with our show class. We also want to get the dominant color of our images so that we paint the curtain in that color.

我们要做的是在将它们滚动到视口中时显示它们。 每个出现的项目都会获得一个动画类，该类将触发我们先前定义的动画。 我们不希望在网格中的第一项上执行动画，因此我们仅通过show类来显示它们。 我们还希望获得图像的主要颜色，以便以该颜色绘制窗帘。

So, let’s start with our script options. minDelay and maxDelay define the range for the delay that each animation will have (we pick a random number between these values). This will result in each item animating at slightly different times which makes the effect look much nicer. If we’d want all the animations to start at the same time then we’d just need to set maxDelay to 0. The viewportFactor defines how much of the appearing item has to be visible in order for the animation to start. So 0 (0%) means the animation starts as soon as the item is inside the viewport, and 1 (100%) means the item has to be completely inside the viewport for it to trigger.

因此，让我们从脚本选项开始。 minDelay和maxDelay定义每个动画将具有的延迟范围(我们在这些值之间选择一个随机数)。 这将导致每个项目的动画制作时间略有不同，从而使效果看起来更好。 如果我们会想所有的动画在同一时间，那么我们就只需要设置启动maxDelay为0。 viewportFactor定义多少出现的项目必须是可见的，为了使动画开始播放。 因此，0(0％)表示动画在该项目进入视口后立即开始，而1(100％)表示该项目必须完全在视口内才能触发。

GridScrollFx.prototype.options = {
minDelay : 0,
maxDelay : 500,
viewportFactor : 0
}

Let’s initialize and cache some variables and also initialize Masonry. We will need to preload the images in order for the Masonry plugin to work correctly. Next, we need to distinguish the items that are already in the viewport and the ones that are not, once the page loads. For the ones that are already in the viewport, we will add the class shown to make them visible without any animation. For the items that are not in the viewport we will create the “curtain” element which will be animated once the items are scrolled into view. We will also set the animation delay for all the animations of each item. Finally we bind the scroll and resize events to the window. We will have a more detailed look at this later on.

让我们初始化并缓存一些变量，还初始化Masonry。 我们将需要预加载图像，以使Masonry插件正常工作。 接下来，一旦页面加载，我们就需要区分视口中已经存在的项目和未包含在视口中的项目。 对于那些已经在视口中的那些，我们将添加所示，使他们没有任何可见的动画类。 对于不在视口中的项目，我们将创建“窗帘”元素，一旦将其滚动到视图中，该元素将被动画化。 我们还将为每个项目的所有动画设置动画延迟。 最后，我们将滚动和调整大小事件绑定到窗口。 稍后我们将对此进行更详细的介绍。

GridScrollFx.prototype._init = function() {
var self = this, items = [];[].slice.call( this.el.children ).forEach( function( el, i ) {
var item = new GridItem( el );
items.push( item );
} );this.items = items;
this.itemsCount = this.items.length;
this.itemsRenderedCount = 0;
this.didScroll = false;imagesLoaded( this.el, function() {
// show grid
self.el.style.display = 'block';// initialize masonry
new Masonry( self.el, {
itemSelector : 'li',
isFitWidth : true,
transitionDuration : 0
} );
// the items already shown...
self.items.forEach( function( item ) {
if( inViewport( item.el ) ) {
++self.itemsRenderedCount;
classie.add( item.el, 'shown' );
}
else {
item.addCurtain();
// add random delay
item.changeAnimationDelay( Math.random() * ( self.options.maxDelay - self.options.minDelay ) + self.options.minDelay );
}
} );var onScrollFn = function() {
if( !self.didScroll ) {
self.didScroll = true;
setTimeout( function() { self._scrollPage(); }, 200 );
}
if( self.itemsRenderedCount === self.itemsCount ) {
window.removeEventListener( 'scroll', onScrollFn, false );
}
}// animate the items inside the viewport (on scroll)
window.addEventListener( 'scroll', onScrollFn, false );
// check if new items are in the viewport after a resize
window.addEventListener( 'resize', function() { self._resizeHandler(); }, false );
});
}

Note that we’ve built a different function called GridItem, to hold each item’s data and methods. When the curtain element is created we set the color of its background. The color will be the most prominent one of the item’s image. It’s retrieved by the Colorfinder plugin:

请注意，我们建立了一个不同的函数GridItem ，以保存每个项目的数据和方法。 创建窗帘元素时，我们设置其背景的颜色。 颜色将是该项目图像中最突出的一种。 它是由Colorfinder插件检索的：

function GridItem( el ) {
this.el = el;
this.anchor = el.querySelector( 'a' )
this.image = el.querySelector( 'img' );
this.desc = el.querySelector( 'h3' );
}GridItem.prototype.addCurtain = function() {
if( !this.image ) return;
this.curtain = document.createElement( 'div' );
this.curtain.className = 'curtain';
var rgb = new ColorFinder( function favorHue(r,g,b) {
// exclude white
//if (r>245 && g>245 && b>245) return 0;
return (Math.abs(r-g)*Math.abs(r-g) + Math.abs(r-b)*Math.abs(r-b) + Math.abs(g-b)*Math.abs(g-b))/65535*50+1;
} ).getMostProminentColor( this.image );
if( rgb.r && rgb.g && rgb.b ) {
this.curtain.style.background = 'rgb('+rgb.r+','+rgb.g+','+rgb.b+')';
}
this.anchor.appendChild( this.curtain );
}GridItem.prototype.changeAnimationDelay = function( time ) {
if( this.curtain ) {
this.curtain.style.WebkitAnimationDelay = time + 'ms';
this.curtain.style.animationDelay = time + 'ms';
}
if( this.image ) {
this.image.style.WebkitAnimationDelay = time + 'ms';
this.image.style.animationDelay = time + 'ms';
}
if( this.desc ) {
this.desc.style.WebkitAnimationDelay = time + 'ms';
this.desc.style.animationDelay = time + 'ms';
}
}

Let’s take a look at what happens when we scroll the page (note that the scroll event function is just being called every 200ms in order to avoid performance issues). First, we will iterate through all our items and check which ones are inside the viewport and are not shown already or currently animating. If an item does not have a curtain element then we will just add the class shown and return, otherwise we will add the class “animate” to trigger our animation. For instance, the first item in our demo grid would be one of those cases. Once the animation ends, we add the class shown and remove the animate class.

让我们看一下滚动页面时会发生什么(请注意，滚动事件函数每200ms才被调用一次，以避免性能问题)。 首先，我们将遍历所有项目，并检查哪些项目在视口内并且尚未显示或当前没有动画。 如果一个项目没有一帘元素，则我们将只添加所示的类和返回，否则我们将添加类“动画”触发我们的动画。 例如，演示网格中的第一项就是其中一种情况。 一旦动画结束，我们添加所示的类并删除动画类。

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

As for resizing the window, we need to check if new items are inside the viewport after a resize:

至于调整窗口的大小，我们需要在调整大小后检查新项目是否在视口内：

GridScrollFx.prototype._resizeHandler = function() {
var self = this;
function delayed() {
self._scrollPage();
self.resizeTimeout = null;
}
if ( this.resizeTimeout ) {
clearTimeout( this.resizeTimeout );
}
this.resizeTimeout = setTimeout( delayed, 1000 );
}

And that’s it! I hope you enjoyed this tutorial and find it useful!

就是这样！ 我希望您喜欢本教程并发现它有用！

Please note that if you have the experimental Web Platform features enabled in Chrome (on Win), the effect might not be visible (items just appear).

请注意，如果您在Chrome中启用了实验性的Web平台功能(在Win上)，则效果可能不可见(仅显示项目)。

翻译自: https://tympanus.net/codrops/2014/05/15/recreating-the-design-samsung-grid-loading-effect/