浙江 杭州

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

系统分类: 网页特效 - jquery插件 - jQuery选项卡/Tabs 2016-11-08

人气9184

亲们该页面内会员们分享的“作品”,版权为才华横溢的原作者们所有滴,不得商业使用!


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

使用方法

HTML结构

在第一种效果中,它的HTML结构如下:<ul>元素中的图片将被制作为一个堆栈结构,所有图片以绝对定位的方式互相堆叠在一起。div.controls是两个控制按钮。当点击“Accept”或“Reject”按钮的时候,当前图片堆栈顶部的图片会被添加acceptreject class。

<ul id="stack_yuda" class="stack stack--yuda">
  <li class="stack__item"><img src="img/1.png" alt="Tree 1" /></li>
  <li class="stack__item"><img src="img/2.png" alt="Tree 2" /></li>
  <li class="stack__item"><img src="img/3.png" alt="Tree 3" /></li>
  <li class="stack__item"><img src="img/4.png" alt="Tree 4" /></li>
  <li class="stack__item"><img src="img/5.png" alt="Tree 5" /></li>
  <li class="stack__item"><img src="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-hidden">Reject</span>
  </button>
  <button class="button button--sonar button--accept" data-stack="stack_yuda">
    <i class="fa fa-check"></i>
    <span class="text-hidden">Accept</span>
  </button>
</div>
              
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);
  }
}                
              

其它例子的实现代码请参考下载文件。

查看演示
下载资源:2
下载资源
错误提交:

格式:zip 大小:562.94KB

================关于优设记================
“优设记ui3g.com“是国内最全jquery插件下载 - 高质量网页素材的学习下载平台
资源微博:同步网站更新内容,订阅jquery资源 @吐槽优设记,欢迎关注获取网页设计资源、下载顶尖设计素材。
文章链接: http://www.ui3g.com/code/uicode-2143.html 非特殊说明,本文版权归原作者所有,转载请注明出处
14种炫酷堆叠卡片切换动画特效

我当前G币余额:0 已下载次数:2

注:购买该插件的用户当日可免费下载 插件作者可永久免费下载

所需G币:20

下载提示:由于文件较小,请直接点击下载,不支持迅雷等下载工具。

抱歉 G币 不足,你可以通过 上传PSD & jquery 充值 获得G币

多一点耐心少一点浮躁有什么新鲜事想告诉大家? 分享有礼 +5G币:(已有1 评论)