14种炫酷堆叠卡片切换动画特效.docxVIP

去名企 拿高薪 到翡翠教育 PAGE \* MERGEFORMAT PAGE \* MERGEFORMAT 1 14种炫酷堆叠卡片切换动画特效 这是一组非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过点击“确定”或“取消”按钮，以不同的方式将最上面的卡片切换到底部。这14最后卡片切换动画创意十足，效果非常炫酷。 使用方法　　HTML结构　　在第一种效果中，它的HTML结构如下：ul元素中的图片将被制作为一个堆栈结构，所有图片以绝对定位的方式互相堆叠在一起。div.controls是两个控制按钮。当点击“Accept”或“Reject”按钮的时候，当前图片堆栈顶部的图片会被添加accept或reject class。 ul id=stack_yuda class=stack stack--yuda ??li class=stack__itemimgsrc=img/1.png alt=Tree 1 //li ??li class=stack__itemimgsrc=img/2.png alt=Tree 2 //li ??li class=stack__itemimgsrc=img/3.png alt=Tree 3 //li ??li class=stack__itemimgsrc=img/4.png alt=Tree 4 //li ??li class=stack__itemimgsrc=img/5.png alt=Tree 5 //li ??li class=stack__itemimgsrc=img/6.png alt=Tree 6 //li /ul div class=controls ??button class=button button--sonar button--reject data-stack=stack_yuda ? ? i class=fa fa-times/i ? ? span class=text-hiddenReject/span ??/button ??button class=button button--sonar button--accept data-stack=stack_yuda ? ? i class=fa fa-check/i ? ? span class=text-hiddenAccept/span ??/button /div 　　JavaScript　　对于这个例子中，main.js文件中提供了一些函数来实现各种功能。动画的实现使用的是dynamics.js动画库。而移动卡片的动画则是通过CSS3动画来实现的。　　插件有一些的一些参数选项： Stotype.options = { ??// stack的透视值 ??perspective: 1000, ??// stack的透视原点 ??perspectiveOrigin : 50% -50%, ??// stack的可见项目数量 ??visible : 3, ??// 无限循环 ??infinite : true, ??// callback: 当到达栈顶时触发 ??onEndStack : function() {return false;}, ??// animation settings for the items movements in the stack when the items rearrange ??// object that is passed to the dynamicsjs animate function (see more at /) ??// example: ??// {type: dynamics.spring,duration: 1641,frequency: 557,friction: 459,anticipationSize: 206,anticipationStrength: 392} ??stackItemsAnimation : { ? ? duration : 500, ? ? type : dynamics.bezier, ? ? points : [{x:0,y:0,cp:[{x:0.25,y:0.1}]},{x:1,y:1,cp:[{x:0.25,y:1}]}] ??}, ??// delay for the items rearrangement / delay before stackItemsAnimation is applied ??stackItemsAnimationDelay : 0, ??// animation settings for the items movements in the stack bef