文字漂浮效果

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

 48998  495  查看评论 (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属性,添加表示元素内文字一元素为边界,不添加以窗口为边界


相关插件-动画效果

超级牛B的js效果

跟上一个心的形状用的类似的方法。不用我多说,看了就知道有多牛B了哦。可兼容手机。暂停之后一个手指拖动改变视角,两个手指可以调整视角的大小,三个手指可以移动。
  动画效果
 58763  331

html5制作雪花效果

html5制作雪花效果
  动画效果
 40358  369

可自定义形状文字的烟花(原创)

canvas仿烟花效果,代码注释全
  动画效果
 56208  447

CSS3实现色彩喷泉

CSS3实现色彩喷泉
  动画效果
 39236  437

讨论这个项目(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

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

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