如何使用wow.js实现页面滚动时触发animate.css动画特效

前端开发项目经常会需要一些动画来提升用户体验,从而来吸引用户注意力。如果我们自己去造轮子显得有点浪费时间,况且也不符合我们国内互联网公司行情。所以能在网上找到现成的轮子来使用,就不要浪费时间做重复的事情,再说公司也不会给你那么多时间研究开发轮子。

最近接了一个私活,开发一个企业网站宣传,既然是企业宣传,那么特效动画就必不可少的了。

所以自然而然的想到了wow.js和animate.css来实现。

wow.js依赖animate.css,不需要jquery;animate.css是纯css动画库,轻松自定义动画设置:样式,延迟,长度,偏移量,迭代…。

使用步骤

1、引入animate.css

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

2、引入wow.js

<script src="js/wow.min.js"></script>

3、初始化wow

new WOW().init();

4、在需要动画的标签上面添加class  注:wow必须加在动画类名前面。

<div class="wow fadeInUp animated">
  <p>码云笔记</p>
</div>

*动画效果展示网站:点击这里

5、高级选项

注:为了更好的控制动画效果(属性)

<div class="wow fadeInUp animated" data-wow-delay="1.5s" data-wow-iteration:"1">
  <p>码云笔记</p>
</div>

相关属性:

  • data-wow-duration:更改动画持续时间
  • data-wow-delay:动画开始前的延迟
  • data-wow-offset:开始动画的距离(与浏览器底部相关)
  • data-wow-iteration:动画的次数重复(无限次:infinite)

上面的已经可以实现动画效果了,但是还有个问题,这些动画会在加载页面时一股脑触发,我们往往想要的是滚动到这里才开始触发。

我们可以使用自定义配置。

这时的JS代码:

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

相关属性介绍:

  • boxClass:用户滚动时显示隐藏框的类名。
  • animateClass:触发CSS动画的类名(animate.css库默认为“animated”)
  • offset:偏移量,定义浏览器视口底部和隐藏框顶部之间的距离。当用户滚动并到达这个距离时,隐藏的框被显示出来。
  • mobile:在移动设备上打开/关闭WOW.js。
  • live:自动检查页面上的新WOW元素。

配置如图:

配置如图

更酷炫的实现组合

除了使用以上的方法实现动画效果以外,我们还可以采用全屏滚动的fullpage插件与wow相结合的方法,实现的效果比较酷炫。我们完全可以仿写。

注意:在使用fullpage.js下wow.js会出现无效失效没动作的情况。

问题就出在fullpage隐藏了滚动条,将滚动条开启即可,把scrollBar设置为true,代码如下:

$('#fullpage').fullpage({
  scrollBar:true;
});

最后利用css将滚动条隐藏,将html添加overflow:hidden;,代码如下:

html{
  overflow:hidden;
}

看到这里就应该是可以满足你最常见的动画效果了。

结语

以上就是我在前端开发中使用过的方法,可能对于大家来说司空见惯了,不是什么新鲜技术了,但是我想的是把我用过的方法记录下来,为后面的新人朋友提供参考及学习价值,感谢阅读。

「点点赞赏,手留余香」

1

给作者打赏,鼓励TA抓紧创作!

微信微信 支付宝支付宝

还没有人赞赏,快来当第一个赞赏的人吧!

声明:
1. 本站所有文章教程及资源素材均来源于网络与用户分享或为本站原创,仅限用于学习和研究。
2. 如果内容损害你的权益请联系客服QQ:1642748312给予处理。
码云笔记 » 如何使用wow.js实现页面滚动时触发animate.css动画特效

发表评论

IT互联网行业相关广告投放 更专业 更精准

立即查看 联系我们