本文为机构官方的教程
这次内容我们接着介绍在swiper页面的翻页动画--3D方块效果。
首先搭建swiper页面,设置CSS样式,为了观看效果,这一章依然在slide当中添加背景图片。
然后在js当中进行初始化以及添加翻页动画。依然是一条属性,但是有些不同。
var swiper = new Swiper('.swiper-container',{ pagination:'.swiper-pagination', grabCursor:true, effect:'cube', //翻页效果:方块 cube:{ shadow:true, slideShadows:true, shadowOffset:20, shadowScale:0.94 } });
那么除了直接添加的属性意外,我们的翻页动画当中还有着自己的属性,就是这里
cube:{ shadow:true, //阴影效果,如果设置为false下面的就不用 slideShadows:true, //页面阴影效果 shadowOffset:20, //阴影的偏移值 shadowScale:0.94 //阴影的大小 }
这样就实现了3D方块的翻页效果