3D旋转特效(touchrotate)

所属分类:其他,输入-动画效果,拖和放

 2767  19  查看评论 (4)
3D旋转特效(touchrotate) ie兼容11

更新时间:2017/10/25 下午5:53:01

更新说明:

1 . 新增了参数 isTransition , 为true时表示有动画效果 , 为false时没有动画效果

2 . 修改bug : 鼠标左键滑动动画进行时 , 如果滑动(左键未点击)box,动画会有异常


更新时间:2017/10/25 下午2:55:56

更新说明:修复了 一个bug该bug只会出在使用JQuery上, 使用Zepto没有这个bug. 

该bug会导致PC端案例演示异常, 当滑动box动画进行中时 , 如果鼠标再次滑动(没有点击鼠标左键) 会干扰动画的bug,


1. 引入插件(前提先引入JQuery或者Zepto)

<script src="jquery-touchrotate.js"></script>

2. 初始化插件

$('.box').touchrotate();

3. 可以配置相关参数

$('.box').touchrotate({
    //初始3D旋转角度
    rotateX: -15,
    rotateY: 15,
    //数值越小 , 旋转速度越快
    speedX: 2,
    speedY: 2,
    // 旋转的倍数, 越大旋转的圈数越多
    multipleX: 50,
    multipleY: 50,
    // 动画持续的时间, 单位是S
    time: 2,
    //模式 0:表示匀速运动 , 运动中途可以重新开始 , 1表示先加速后减速(动画过程中不可滑动,体验效果差)
    model: 0
});
相关插件-动画效果,拖和放

CSS3提交按钮动画特效

这个提交按钮效果有两组动画:当屏幕大于800px的时候是一个动画效果,当屏幕小于800像素的时候是另一种动画效果。缩放你的浏览器看看不同的提交按钮动画效果吧!
  动画效果
 12360  89

jQuery超酷文字淡入淡出显示特效

文字淡入淡出显示特效
  动画效果
 1788  16

css实现任务奔跑

利用backgroundposition,实现人物跑步的动画 ,并且支持快慢,暂停等
  动画效果
 9861  109

jQuery字体特效插件animatext.js

css3炫酷字体特效
  动画效果
 2331  22

讨论这个项目(4)回答他人问题或分享插件使用方法奖励jQ币

    依秋无泪 0
    2017/10/25 1:49:08

    移动端的演示地址 :  http://bm.huangxiaoyong.com/3D/3D-zepto.html

    PC端的演示地址   :  http://bm.huangxiaoyong.com/3D/3D-jquery.html 

        依秋无泪0
        2017/10/25 2:07:59

        可以在以上地址查看演示 , 已解决已知的bug

        依秋无泪0
        2017/10/25 2:15:14

        移动端的演示效果比PC端好很多 , 因为这个插件一开始基于Zepto写的, 后来兼容了JQuery ,一些小细节没处理好 ,  所以PC端还有一些小问题 ,后期会修复

        依秋无泪0
        2017/10/25 15:05:12

        已修复PC端JQuery 的相关bug , 效果等同于移动端的Zepto

    回复
取消回复