全屏网格折叠动画插件.docxVIP

前言Duang，Duang，Duang，博主又来分享插件了，这次是一个炫酷的网格折叠动画效果，其原理模拟纸板折叠过程的动画，页面使用了大量CSS3属性，具体效果请看演示页面（建议使用新版谷歌、火狐浏览器观看，对于ie9以下不支持CSS3属性的浏览器不兼容）。博主个人建议：这个效果可以用于网站引导用户进行操作，或者在页面资源加载较多时作为信息展示页面使用。线上演示地址：https://yangyunhe369.github.io/jQuery-Flod-Grid/github地址：/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的原点基于中心的进行折叠。这就是所有网格动画的一个完整的执行过程。源码解析下面展示一下源码：//定义基础变量，以及插件apivar_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以下是关于网格折叠动画的代码：varp = perspective(600px); //定义 3D 元素距视图的距离for(vari=0;i5;i++){??$(.+_square).eq(i).css({transform:p+ rotateY(-90deg),transition-delay:(i+1)*0.3+s});}for(varj=11;j5;j--){??$(.+_square).eq(j).css({transform:p+ rotateY(90deg),transition-delay:(11-j)*0.3+s});}for(var