全屏网格折叠动画插件

插件应用

浏览数:2,080

2018-1-2

前言

Duang,Duang,Duang,博主又来分享插件了,这次是一个炫酷的网格折叠动画效果,其原理模拟纸板折叠过程的动画,页面使用了大量CSS3属性,具体效果请看演示页面(建议使用新版谷歌、火狐浏览器观看,对于ie9以下不支持CSS3属性的浏览器不兼容)。

博主个人建议:这个效果可以用于网站引导用户进行操作,或者在页面资源加载较多时作为信息展示页面使用。

线上演示地址:https://yangyunhe369.github.io/jQuery-Flod-Grid/
github地址:https://github.com/yangyunhe369/jQuery-Flod-Grid
演示一 演示二
ps:github地址有代码演示,以及插件源码可供参考,线上演示地址可供预览。

插件逻辑

分析这个插件逻辑之前,先说一下实现动画效果的CSS3属性:transform-origin。这个属性主要用于设置旋转元素的基点位置,就是用于改变网格翻转时基点,因为默认网格翻转是以网格中心点为基点进行翻转,这样的动画效果不符合我们预期。下面这张图大概讲解了一下transform-origin属性配合rotate属性实现网格翻转动画的原理。

在这张图里,你会看到每个网格对应一个数字,这是方便理解整体网格区域与窗口显示区域的关系。整体网格容器是由33个网格组成,一共分为3排,每排11个。在我们的可视区域内,如果不算上屏幕两边的半个网格区域,一共有6个网格,所有还有5个网格(包括未显示完整的网格)未显示。可以根据序号得出左边有3个网格(0、1、2),右边有2个网格(9、10)隐藏了。

ps:这里的序号对应每个网格排列的序号(从 0 开始计算)

下面是分解动画的过程:


从这里可以观察出,每排的网格都会逐渐向中心折叠,这里的中心元素分别对应序号5(第6个网格)、16(第17个网格)、27(第28个网格)。当第一排和第三排网格都折叠完毕时,第一排网格和第三排网格(5、27)朝向网格16折叠,最后网格16的原点基于中心的进行折叠。这就是所有网格动画的一个完整的执行过程。

源码解析

下面展示一下源码:

//定义基础变量,以及插件api
var _ops = $.extend({
    shadeTime: 1000, //遮罩层遮挡网格时长
    flodTime: 1000, //初始化页面执行网格折叠动画的延迟时长
    showBtnTime: 4500, //折叠动画开始至显示按钮的延迟时长
    loading_zzc: 'loading_zzc', //遮罩层的class
    loading_btns: 'loading_btns', //网格动画控制按钮的class
    btn_logo: 'btn_logo', //网格动画控制按钮子元素的class
    preloader: 'preloader', //网格容器的class
    square_box: 'square_box', //网格容器子元素的class
    square: 'square' //网格的class
}, options);
var $this = $(this),
    _shadeTime = _ops.shadeTime, //遮罩层遮挡网格时长
    _flodTime = _ops.flodTime, //初始化页面执行网格折叠动画的延迟时长
    _showBtnTime = _ops.showBtnTime, //折叠动画开始至显示按钮的延迟时长
    _loading_zzc = _ops.loading_zzc, //遮罩层的class
    _loading_btns = _ops.loading_btns, //网格动画控制按钮的class
    _btn_logo = _ops.btn_logo, //网格动画控制按钮子元素的class
    _preloader = _ops.preloader, //网格容器的class
    _square_box = _ops.square_box, //网格容器子元素的class
    _square = _ops.square; //网格的class

以下是关于网格折叠动画的代码:

var p = 'perspective(600px)'; //定义 3D 元素距视图的距离
for(var i=0;i<5;i++){
  $('.'+_square).eq(i).css({'transform':p+' rotateY(-90deg)','transition-delay':(i+1)*0.3+'s'});
}
for(var j=11;j>5;j--){
  $('.'+_square).eq(j).css({'transform':p+' rotateY(90deg)','transition-delay':(11-j)*0.3+'s'});
}
for(var k=12;k<16;k++){
  $('.'+_square).eq(k).css({'transform':p+' rotateY(-90deg)','transition-delay':(k-9)*0.3+'s'});
}
for(var m=22;m>16;m--){
  $('.'+_square).eq(m).css({'transform':p+' rotateY(90deg)','transition-delay':(23-m)*0.3+'s'});
}
for(var s=23;s<27;s++){
  $('.'+_square).eq(s).css({'transform':p+' rotateY(-90deg)','transition-delay':(s-19)*0.3+'s'});
}
for(var g=33;g>27;g--){
  $('.'+_square).eq(g).css({'transform':p+' rotateY(90deg)','transition-delay':(35-g)*0.3+'s'});
}
$('.'+_square).eq(5).css({'transform':p+' rotateX(90deg)','transition-delay':'2.4s'});
$('.'+_square).eq(27).css({'transform':p+' rotateX(-90deg)','transition-delay':'2.7s'});
$('.'+_square).eq(16).css({'transform':p+' rotateX(90deg)','transition-delay':'3.2s'});

以下是关于网格展开动画的代码:


var p = 'perspective(600px)'; //定义 3D 元素距视图的距离
for(var i=4;i>-1;i--){
  $('.'+_square).eq(i).css({'transform':p+' rotateY(0deg)','transition-delay':(9-i)*0.3+'s'});
}
for(var j=6;j<12;j++){
  $('.'+_square).eq(j).css({'transform':p+' rotateY(0deg)','transition-delay':(j-1)*0.3+'s'});
}
for(var k=15;k>11;k--){
  $('.'+_square).eq(k).css({'transform':p+' rotateY(0deg)','transition-delay':(19-k)*0.3+'s'});
}
for(var m=17;m<23;m++){
  $('.'+_square).eq(m).css({'transform':p+' rotateY(0deg)','transition-delay':(m-13)*0.3+'s'});
}
for(var s=26;s>22;s--){
  $('.'+_square).eq(s).css({'transform':p+' rotateY(0deg)','transition-delay':(29-s)*0.3+'s'});
}
for(var g=28;g<34;g++){
  $('.'+_square).eq(g).css({'transform':p+' rotateY(0deg)','transition-delay':(g-25)*0.3+'s'});
}
$('.'+_square).eq(5).css({'transform':p+' rotateX(0deg)','transition-delay':'0.6s'});
$('.'+_square).eq(27).css({'transform':p+' rotateX(0deg)','transition-delay':'0.3s'});
$('.'+_square).eq(16).css({'transform':p+' rotateX(0deg)','transition-delay':'0s'});

本插件的完整源码,可以访问github地址:https://github.com/yangyunhe369/jQuery-Flod-Grid

作者: 弦云孤赫 原文链接: http://www.yangyunhe.me/2017/jquery-flodGrid/
本文可以转载,但务必注明原作者和原出处。