文字漂浮效果

所属分类:其他-动画效果

 51044  496  查看评论 (17)
分享到微信朋友圈
X
文字漂浮效果 ie兼容10

更新时间:2017/1/20 上午9:56:08

更新说明:

1.调整代码顺序

2.元素层级关系

3.修改错误的引用

更新时间:2017/1/19 下午4:13:22

更新说明:

1.修改浏览器窗口缩放时,反弹位置的判断。

2.使用注意:不要给元素任何定位,否则反弹位置判断失效。

3.把装主要文字的元素,(例如p)在最后定义,否则反弹位置判断失效。也可以在外部通过 

window.onresize = function(){ 
    object1.resetpos(); 
    object2.resetpos() 
}

调用的方法解决。

使用方法:

1. 获取元素

2. 初始化  Dom.render.run();

3. 绑定结束时间 并调用结束方法   Dom.render.killer();

4. 其他参数  ele-range属性,添加表示元素内文字一元素为边界,不添加以窗口为边界


相关插件-动画效果

3D签到墙 threejs(使用元素周期表修改)

采用threejs官方demo的元素周期更改的,展示为图片,可自动更换或手动更换,目前为旋转状态;模拟推送用户可以优化随机更改图片应该会更好点。
  动画效果
 72489  664

jQuery延时动画插件aniAuto

该插件主要用于执行Animate.css动画库,可以实现动画延时,队列,执行时间,滞后执行,重复执行等
  动画效果
 37392  379

jQuery制作360度旋转雷达扫描动画

这是一款带科技感的jQuery制作360度旋转雷达扫描动画特效,雷达扫描信息认证动画效果。
  动画效果
 32743  373

超酷炫的HTML5页面飘落蒲公英动画

别人都飘雪,咱们开始飘蒲公英啦!
  动画效果
 47669  648

讨论这个项目(17)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    ┽路过的风景 0
    2018/10/11 21:08:11
    这个字可以改成图片吗 回复
    卑天抿人 0
    2018/1/13 10:52:00

    可以可以,顶一个

    回复
    时光时光 0
    2017/10/15 16:18:00
    梦之旅殇 0
    2017/9/22 15:19:12
    风逝 0
    2017/9/19 9:27:15
    丿泡泡丶丨俱乐部 0
    2017/6/21 14:21:56

    看起来蛮好玩的

    回复
    BULL Y 0
    2017/4/24 10:00:02

    好厉害!! 可以拿去表白了!!!

    回复
    ?? 清〈 0
    2017/4/1 10:18:09
    zjsdn 0
    2017/3/24 16:31:14

    就想问问反弹角度是怎么计算的

        静夜随风1
        2018/12/8 23:01:38
        我觉得不用计算角度,字在移动过程中(假设满足,x+=移动速度),当x+=移动速度大于显示器宽度,或者x+=移动速度小于0时,那么这是的移动速度取反,比如x+=5,变为x+=-5,y轴坐标同理
    回复
    lemypyl 0
    2017/3/7 9:46:37

    感觉可以做一个好玩的效果 哈哈

    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复