zoukankan      html  css  js  c++  java
  • 时尚设计!三种奇特的网格加载效果【附源码下载】

      如果你看过三星企业设计中心网站,你肯定已经注意到了时尚的网格加载效果。每一项加载的时候,背景色会首先滑出,然后图像显现出来。滑动颜色表示图像,也就是说它是彩色图像的主色。

      在这篇文章中,我们想向您展示了如何使用 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/)】

  • 相关阅读:
    C++ 注意事项
    Google protocol buffer的配置和使用(Linux&&Windows)
    网络编程的一些错误总结
    C++单例模式设计与实现
    TCP粘包处理
    C++ 局部静态变量,全局变量,全局静态变量,局部变量的区别和联系
    C++模板类注意事项
    Django框架(二十二)—— Django rest_framework-频率组件
    Django框架(二十一)—— Django rest_framework-权限组件
    Django框架(二十)—— Django rest_framework-认证组件
  • 原文地址:https://www.cnblogs.com/lhb25/p/the-design-samsung-grid-loading-effect.html
Copyright © 2011-2022 走看看