14种炫酷堆叠卡片切换动画特效
简要教程
这是一组非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过点击“确定”或“取消”按钮，以不同的方式将最上面的卡片切换到底部。这14最后卡片切换动画创意十足，效果非常炫酷。
查看演示 下载插件
使用方法
HTML结构
在第一种效果中，它的HTML结构如下：
- 元素中的图片将被制作为一个堆栈结构，所有图片以绝对定位的方式互相堆叠在一起。div.controls是两个控制按钮。当点击“Accept”或“Reject”按钮的时候，当前图片堆栈顶部的图片会被添加accept或reject class。
JavaScript
对于这个例子中，main.js文件中提供了一些函数来实现各种功能。动画的实现使用的是dynamics.js动画库。而移动卡片的动画则是通过CSS3动画来实现的。
插件有一些的一些参数选项：
Stack.prototype.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 http://dynamicsjs.com/) // 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 before the rearrangement // we can set up different settings depending on whether we are approving or rejecting an item stackItemsPreAnimation : { reject : { // if true, then the settings.properties parameter will be distributed through the items in a non equal fashion // for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4, // then the second item in the stack will translate 100px, the second one 75px and the third 50px elastic : true, // object that is passed into the dynamicsjs animate function - second parameter - (see more at http://dynamicsjs.com/) animationProperties : {}, // object that is passed into the dynamicsjs animate function - third parameter - (see more at http://dynamicsjs.com/) animationSettings : {} }, accept : { // if true, then the settings.properties parameter will be distributed through the items in a non equal fashion // for instance, if we set settings.properties = {translateX:100} and we have options.visible = 4, // then the second item on the stack will translate 100px, the second one 75px and the third 50px elastic : true, // object that is passed into the dynamicsjs animate function - second parameter - (see more at http://dynamicsjs.com/) animationProperties : {}, // object that is passed into the dynamicsjs animate function (see more at http://dynamicsjs.com/) animationSettings : {} } } } 对于这个例子中使用的CSS3动画代码如下：
/******************** yuda *********************/ .stack--yuda .stack__item--reject { -webkit-animation: yudaReject 0.5s forwards; animation: yudaReject 0.5s forwards; } @-webkit-keyframes yudaReject { to { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } } @keyframes yudaReject { to { opacity: 0; -webkit-transform: translate3d(0, 200px, 0); transform: translate3d(0, 200px, 0); } } .stack--yuda .stack__item--accept { -webkit-transform-origin: 50% 300%; transform-origin: 50% 300%; -webkit-animation: yudaAccept 0.5s forwards; animation: yudaAccept 0.5s forwards; } @-webkit-keyframes yudaAccept { to { opacity: 0; -webkit-transform: rotate3d(0, 0, 1, 20deg); transform: rotate3d(0, 0, 1, 20deg); } } @keyframes yudaAccept { to { opacity: 0; -webkit-transform: rotate3d(0, 0, 1, 20deg); transform: rotate3d(0, 0, 1, 20deg); } } 其它例子的实现代码请参考下载文件。
推荐插件：wdImageStax是一款效果非常酷的 堆叠图片切换展示jQuery插件 。该插件可以将一组图片进行堆叠，每张图片随机旋转不同的角度。当用户点击某张图片时，这张图片会被抽出放到堆叠图片的最后位置。
来源 jQuery之家
正文到此结束
热门推荐
相关文章
近期评论
-
666
-
文章和留言都翻到11页了 没有OOM
-
-
朋友，翻页到11页，及以后，会出现OOM，无法访问
-
-
-
-
版本号是多少，你可以下载哪个代码仓库，jdk选1.8 直接跑就行
-
-
Loading...
![[HBLOG]公众号](https://www.liuhaihua.cn/img/qrcode_gzh.jpg)
