转载

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

简要教程

这是一组非常有创意的堆叠卡片切换动画特效。这些堆叠卡片切换效果通过点击“确定”或“取消”按钮，以不同的方式将最上面的卡片切换到底部。这14最后卡片切换动画创意十足，效果非常炫酷。

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

查看演示 下载插件

使用方法

HTML结构

在第一种效果中，它的HTML结构如下：

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之家

正文到此结束

所属分类：编程技术

本文标签： java 代码 src spring CSS dist UI example jquery 参数插件 js key ip HTML web App http
版权声明： 本文为互联网转载文章，出处已在文章中说明(部分除外)。如果侵权，请联系本站长删除，谢谢。
本文海报： 生成海报一生成海报二