时尚设计！三种奇特的网格加载效果【附源码下载】

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

　　在这篇文章中，我们想向您展示了如何使用 Masonry 网格砌体插件，结合 CSS 动画重现这种效果。另外在这里，我们还借助了 ColorFinder
来获得的图像的最突出的颜色来作为初始的加载背景色使用。

　　

立即下载      在线演示

　　温馨提示：为保证最佳的效果，请在 IE10+、Chrome、Firefox
和 Safari 等现代浏览器中浏览。

　　另外，这个例子中我们不会去动态加载项目或图像，而是模拟在页面滚动的时候去显示。当然，在实际情况下可能是动态加载的内容，可以使用类似延迟加载（Lazy
Loading）或无限滚动（Infinite Scrolling）插件实现。

HTML

　　我们使用一个无序列表显示网格。第一个列表项将有一个特殊的风格，我们给它添加样式类“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">

            <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% ，我们
让元素在中间过程停留了一下，不只是由左到右线性的移动：

?





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

　　这个效果稍微有点复杂，因此还需要 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/）】

时间： 2024-08-01 08:57:40

时尚设计！三种奇特的网格加载效果【附源码下载】的相关文章

android Listview分批加载+自动加载（附源码下载）

直接上代码,代码有注释: public class TestForListviewActivity extends Activity implements OnScrollListener { private ListView mListview = null; private View mFooterView; private PaginationAdapter mAdapter; private Handler handler=new Handler(); private boolean i

Cesium专栏-百度地图加载（附源码下载）

Cesium 是一款面向三维地球和地图的,世界级的JavaScript开源产品.它提供了基于JavaScript语言的开发包,方便用户快速搭建一款零插件的虚拟地球Web应用,并在性能,精度,渲染质量以及多平台,易用性上都有高质量的保证. Cesium可以很方便的加载高德地图.天地图地图.谷歌地图等,但是百度地图的加载不支持,笔者仿照UrlTemplateImageryProvider的定义规范以及相关资料,写了一个简单的百度地图加载方法. 效果图: 加载方法跟UrlTemplateImagery

奇特的网格加载效果

源码下载      在线演示

Openstack学习笔记之——Neutron-server服务加载与启动源码分析（三）

本文是在学习Openstack的过程中整理和总结,由于时间和个人能力有限,错误之处在所难免,欢迎指正! 在Neutron-server服务加载与启动源码分析(二)中搞定模块功能的扩展和加载,我们就回到Neutron-server服务加载与启动源码分析(一)中的_run_wsgi函数 <span style="font-size:14px;">def _run_wsgi(app_name): app = config.load_paste_app(app_name) ifno

酷毙了！三种风格的全屏幻灯片效果【附源码下载】

今天,我们想向您展示如何创建平铺背景图像的幻灯片效果.其灵感来自于国外的一个工作室网站(围观),这个网站充满了各种有趣和创意效果,一定记得去看看. 这个幻灯片效果是由四个区域的独立移动构成,通过画面分割,同时显示出新的图片.这里需要组合使用 CSS3 的3D转换.过渡和动画功能.除了这种效果我们也将添加两个更多的变化,我们的宗旨是实现超流畅的交互体验. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 源码下载      在线演示

Android Studio 3.5测试版加载SDK java源码

参考博客:http://blog.sina.com.cn/s/blog_c3eb50230102wt1g.html 1.下载adnroid-28的源码 在Android Studio中加载不到源码的下载链接,所在在Android Studio中下载不到源码. 所以,需要借助 android-sdk_r24.4.1-windows.zip 下载源码,这个zip的下载链接 https://dl.google.com/android/android-sdk_r24.4.1-windows.zip?ut

30种奇妙的鼠标悬停效果【附源码下载】

Web 界面上交互的方式很多,只要你去探索,你会发现很多让你眼前一亮的想法.Codrops 最近发布了一组悬停效果,总共分为两组,多达30种不同的风格.为了让效果尽可能的平滑,最好不要在元素上使用变换以免影响布局.第二组效果中采用了 SVG 动画,这也是目前比较流行的方式. 温馨提示:为保证最佳的效果,请在 IE10+.Chrome.Firefox 和 Safari 等现代浏览器中浏览. 在线演示      源码下载 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享

别翻了，这篇文章绝对让你深刻理解java类的加载以及ClassLoader源码分析【JVM篇二】

目录 1.什么是类的加载(类初始化) 2.类的生命周期 3.接口的加载过程 4.解开开篇的面试题 5.理解首次主动使用 6.类加载器 7.关于命名空间 8.JVM类加载机制 9.双亲委派模型 10.ClassLoader源码分析 11.自定义类加载器 12.加载类的三种方式 13.总结 14.特别注意 @ 前言 你是否真的理解java的类加载机制?点进文章的盆友不如先来做一道非常常见的面试题,如果你能做出来,可能你早已掌握并理解了java的类加载机制,若结果出乎你的意料,那就很有必要来了解了解j

Android 图片加载框架Universal-Image-Loader源码解析

Universal-Image-Loader(项目地址)可以说是安卓知名图片开源框架中最古老.使用率最高的一个了.一张图片的加载对于安卓应用的开发也许是件简单的事,但是如果要同时加载大量的图片,并且图片用于ListView.GridView.ViewPager等控件,如何防止出现OOM.如何防止图片错位(因为列表的View复用功能).如何更快地加载.如何让客户端程序员用最简单的操作完成本来十分复杂的图片加载工作,成了全世界安卓应用开发程序员心头的一大难题,所幸有了Universal-Image-