Fashion design! Three exotic grid loading effects (source code download]

If you have read the Samsung enterprise Design Center website, you must have noticed the fashionable grid loading effect. When each item is loaded, the background color first slides out and then the image is displayed. Sliding color indicates the image, that is, it is the dominant color of the color image.

In this article, we want to show you how to useMasonryGrid masonry plug-in, combinedCSSAnimation to reproduce this effect. In addition, we also use ColorFinder to obtain the most prominent color of the image as the initial loading background color.

 

Download Online Demo now

 

Tip: to ensure the best results, visit modern browsers such as IE10 +, Chrome, Firefox, and Safari.

In addition, in this example, we do not dynamically load the project or image, but simulate display when the page is scrolling. Of course, the content may be dynamically loaded in actual situations. You can use a plug-in like Lazy Loading or Infinite Scrolling.

HTML

We use an unordered list to display the grid. The first list item has a special style. We add the Style Class "title-box" to it ":

<section class="grid-wrap">    <ul class="grid swipe-right" id="grid">        <li class="title-box">            
Each list item contains an image and an anchor of the title. Note that we will control which animation types will be used for three classes in the unordered list, swipe-right, swipe-down, or swipe-rotate. When loading a page, we want to make the visible items displayed, and trigger the animation effect when scrolling.
CSS
Initially, all elements are hidden. When an element enters the visible area (Viewport), we add an animation class to the element to set the animation effect of the element.
For the Swipe Right effect, we will set the translate value of the curtain element to 0, move it from the left to the center, and then move it to the Right. By setting the translate values to 50% and 60%, we let the elements stay in the middle process, not just from left to right linear movement:
/* 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); }}
The reason for using translate (0) is that in some browsers (such as IE11), translate3d (, 0) may have problems in this case.
The Swipe Down effect is similar, but the Y axis is replaced with the X axis:
/* 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 same is true for the rotation effect. The Code is as follows:
/* 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 animation effect code above is the core part.
JavaScript
This effect is a little complicated, so JavaScript is needed for some control. The following is the core part of the Code:
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;}
In the above Code, we add an animation class to the element entering the visible area to trigger the animation effect, and delete the bound events and animation classes in the callback time of the animation end, in this way, we can achieve the desired effect.
 
Download Online Demo now
 
Articles you may be interested in

 

 
  
Unlimited creativity! A set of webpage sidebar transition animations [download with source code]
 
  
It's really good! 13 very dynamic page loading animation Effects
 
  
Have you ever seen it? 9 superb check box Effects
 
  
Awesome! Bootstrap-based responsive background management template
 
  
Awesome! Amazing page switching animation effects [Download source code]

 
 
Link to this article: Unique grid loading effect [download with source code] via codrops

Source: Dream sky ◆ focus on front-end development technology ◆ share web design resources
This article from [dream sky (http://www.cnblogs.com/lhb25 )]