WOW.js在页面滚动时展现动感的元素动画效果

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

 127442  509  查看评论 (31)
分享到微信朋友圈
X
WOW.js在页面滚动时展现动感的元素动画效果 ie兼容10

在一些网页上,当你滚动页面的时候会看到各式各样的元素动画效果,非常动感。WOW.js 就是一款帮助你实现这种 CSS 动画效果的插件,很容易定制,你可以改变动画设置喜欢的风格、延迟、长度、偏移和迭代等。

使用方法:

1、引入文件

<link rel="stylesheet" href="css/animate.min.css">

2、HTML

<div class="wow slideInLeft"></div>
<div class="wow slideInRight"></div>

可以加入 data-wow-duration(动画持续时间)和 data-wow-delay(动画延迟时间)属性,如:

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s"></div>
<div class="wow slideInRight" data-wow-offset="10"  data-wow-iteration="10"></div>

3、JavaScript

new WOW().init();

如果需要自定义配置,可如下使用:

var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();

配置

属性/方法类型默认值说明
boxClass字符串‘wow’‘wow’需要执行动画的元素的 class
animateClass字符串‘animated’‘animated’animation.css 动画的 class
offset整数0距离可视区域多少开始执行动画
mobile布尔值true是否在移动设备上执行动画
live布尔值true异步加载的内容是否有效



相关插件-滚动,动画效果

jQuery仿淘宝网右侧悬浮返回顶部和建议代码

jQuery仿淘宝网右侧悬浮返回顶部和建议代码
  滚动
 36846  320

HTML5单页面全屏滚动特效

全屏滚动代码简单,非常适合新手。
  滚动
 46788  438

jQuery.nicescroll美化滚动条

自定义scroll的样式,可配置
  滚动
 84043  464

全屏滚动插件带侧边栏

过渡效果柔和的滚动插件,适用pc和手机
  滚动
 32264  410

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

    淡淡地忧殇丶 0
    2019/8/10 20:10:12
    安卓手机端有很明显的问题,底部根本就不显示了 回复
    ゆBlUeS.㈨ 0
    2018/9/11 10:19:19
    这个要是内容是用append出来的话再加上wow就出不来了 回复
    又是&曾经 0
    2018/5/29 10:55:14
    我的没有任何反应,咋了,我是小白
    回复
    lucky 0
    2017/3/28 13:47:32

    在本地刷新,能显示。在服务器上。刷新当前不显示。需要滚动才能显示。。。

        liuyun20
        2017/12/14 16:52:04

        这个插件本来就是鼠标滚动时,可视的地方发生动画,但只发生一次,鼠标滚回时,不发生

    回复
    传说中de高手?2 0
    2016/12/22 1:12:46
    这个有免费的
        Fred梁发鹏0
        2018/5/21 21:58:37
        哪里有免费的
        狗晟子―Dogend0
        2019/7/7 17:17:17
        Github
    回复
    天堑 0
    2016/12/13 9:12:11
    开始的时候,挺好的,后来突然就没有任何效果,还把我的div给隐藏了。最后只能删了,自己用jquery写效果。谁知道为什么啊。一样的代码,两个文件,一个效果正常,一个把div给隐藏了。 回复
    1874, 0
    2016/9/7 15:09:20
    为什么不能添加点击事件??难道只有我一个人遇到需要点击跳转链接的情况吗? 回复
    黑皮2o15 0
    2016/7/17 14:07:00
    这个效果挺好的,但是一个页面只能显示一次效果,也就是,向下滚动出现了效果以后,再次来回滚动,都不会出现动画效果了,如何解决呢?
        好好先森0
        2017/8/8 23:52:17
        解决了吗?同问
        liuyun20
        2017/12/14 16:56:22

        这个插件就是那样的,当可视的地方加载时,只播放动画一次,如果滚回时,也 播放动画,会让画面显得凌乱

        海日一山盟0
        2018/4/10 11:33:03
        有人已经改了js,可以解决这个问题
        渠道速建-策划-董哲0
        2018/11/15 11:50:39
        谁改了js,能分享么?
        夏天的回忆0
        2018/11/21 16:31:12
        wow.min2.js,可以实现上下滚动效果
        A boy of temperament0
        2019/6/10 17:05:39
        aos.js可以完美实现上下滚动显示与隐藏
    回复
    没有栀子花的季节。 0
    2016/6/2 18:06:23
    为什么用了插件之后,刷新页面,第一视窗的窗口会出动画,往下拉动滚动条的时候,下面设置的动画瓦全没作用,没作用不说,还把内容全部都隐藏了
        小村青年0
        2016/7/25 0:07:38
        同问
        王桥-帝联科技广州分公司0
        2016/9/7 15:09:03
        把你的HTML代码贴出来看一下
        我叫胡八二xX。0
        2016/11/3 14:11:14
        一样的问题啊!纠结好几天了。。。。
        つ明显喜欢。0
        2017/5/19 11:58:51

        谁知道怎么弄

        ?? 勿忘初心 ??0
        2017/6/23 19:31:15

        我也是  所有的动画一起执行啦 并没有滚动到他 他才执行!!!!

        渐行 渐远0
        2017/8/22 14:46:06

        解决了吗?移动端也是这问题,怎么处理

        那朵云0
        2018/1/25 15:07:34

        有人知道怎么解决吗?

        黄媛0
        2018/7/12 7:51:51
        换个布局试试
    回复
    蓝鲸记 0
    2016/6/1 14:06:51
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复