青岛网站建设新闻资讯

wow.js实现上下滚动页面都有效果,wow.js重复执行?

时间:2023-01-04 已阅读:273次 | 作者:青岛网站建设

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

WOW.js 依赖 animate.css,所以它支持 animate.css 多达 60 多种的动画效果,能满足您的各种需求。

但是大家都直接wow.js不能像RevealScroll一样,当网页上下滚动页面的时候都有效果,wow.js只能实现一次,怎么样让wow.js也能上下滚动的时候有效果呢,经青岛网络公司修改了核心代码后已经实现效果。下面给出下载地址,提供给大家直接使用!

下载地址:https://www.qinghuahulian.com/static/upload/js/wow.min2.js

 

【用法】

在做项目中,有时需要做到滚动条滑到某个位置时,才能显示动画,wow.js插件可以很好的解决问题

下面说明一下怎么使用这个插件:

1、wow.js依赖于animate.css,首先在头部引用animate.css或者animate.min.css

<link rel="stylesheet" href="https://daneden.github.io/animate.css/animate.min.css">  

2.在最底部引用wow.js或者wow.min.js,然后再下面再写一行javascript代码(无需引用jQuery)

<script type="text/javascript" src="https://www.qinghuahulian.com/static/upload/js/wow.min2.js"></script>   实现上下滚动页面都有效果
<script type="text/javascript" src="https://cdn.dowebok.com/131/js/wow.min.js"></script> 实现向下滚动页面都有效果
<script type="text/javascript">  
    new WOW().init();
</script>  


如果需要自定义配置,可如下使用:
1
2
3
4
5
6
7
8
var wow = new WOW({
    boxClass: 'wow',
    animateClass: 'animated',
    offset: 0,
    mobile: true,
    live: true
});
wow.init();
注意:new WOW().init();中的WOW要大写,否则就没效果了

  

3、在css下方js上方写需要动画的元素(必须设置为块状或者行内块状),并添加class类名

在需要动画的标签上添加.wow 和 你的动画元素即可

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

类名前面的wow是每一个带动画的元素都要加的,slideInLeft就是说明动画样式。

后面的data-wow-duration(动画持续时间)、data-wow-delay(动画延迟时间)、data-wow-offset(元素的位置露出后距离底部多少像素执行)和data-wow-iteration(动画执行次数)这四个属性可选可不选

注意:其中data-wow-offset="数值"中的数值是动画完成后元素距离显示器底部的位置,而不是距离浏览器窗口底部的位置。


二维码
扫描二维码手机查看该文章

文章引用:https://www.qinghuahulian.com/news/webzhishi/1367.html

相关资讯

我有建站需求

*请正确填写需求信息,我们最快会在1小时内与您取得联系!
注:如果想获取实时咨询报价,您可以拔打业务经理手机186-5321-9163或扫码添加客户经理微信咨询。

Copyright © 2022 青岛青华互联网站建设公司 www.qinghuahulian.com All Rights Reserved
鲁公网安备37020202000800号 鲁ICP备14020555号-4 网站地图 百度地图