JS库之wow.js使用方法


Posted in Javascript onSeptember 14, 2017

近日,在做项目中,需要做到滚动条滑到某个位置时,才能显示动画,网上查询到有个wow.js可以达到要求,现在把使用方法做如下总结:

wow.js演示地址

wow.js的github地址

使用方法真是超简单~~

需要配合Animated.css使用

方法如下:

1.引用wow.js或者wow.min.js 和 animate.css

JS库之wow.js使用方法

2.在需要用到这个效果的元素上面添加class="wow fadeInUp" 和 data-wow-delay=".1s",具体所表示的含义在下图中有说明

JS库之wow.js使用方法

3.初始化wow.js

JS库之wow.js使用方法

代码如下:

 <script>
wow = new WOW({
  
animateClass: ‘animated‘,
  });
  wow.init();

</script>

总结

以上所述是小编给大家介绍的S库之wow.js使用方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
五段实用的js高级技巧
Dec 20 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
js与C#进行时间戳转换
Nov 14 Javascript
jQuery中:button选择器用法实例
Jan 04 Javascript
轮播图组件js代码
Aug 08 Javascript
js正则表达式最长匹配(贪婪匹配)和最短匹配(懒惰匹配)用法分析
Dec 27 Javascript
jquery实现手机端单店铺购物车结算删除功能
Feb 22 Javascript
js中的深浅拷贝问题简析
May 10 Javascript
vue使用swiper.js重叠轮播组建样式
Nov 14 Javascript
vue列表数据发生变化指令没有更新问题及解决方法
Jan 16 Javascript
vue 解决IOS10低版本白屏的问题
Nov 17 Javascript
JavaScript正则表达式和级联效果
Sep 14 #Javascript
详解使用Visual Studio Code对Node.js进行断点调试
Sep 14 #Javascript
react 父组件与子组件之间的值传递的方法
Sep 14 #Javascript
分分钟学会vue中vuex的应用(入门教程)
Sep 14 #Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
JS验证码实现代码
Sep 14 #Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 #Javascript
You might like
php5.x禁用eval的操作方法
2018/10/19 PHP
在laravel5.2中实现点击用户头像更改头像的方法
2019/10/14 PHP
ThinkPHP类似AOP思想的参数验证的实现方法
2019/12/18 PHP
javascript 面向对象全新理练之继承与多态
2009/12/03 Javascript
javascript 异步页面查询实现代码(asp.net)
2010/05/26 Javascript
input标签内容改变的触发事件介绍
2014/06/18 Javascript
jquery实现页面百叶窗走马灯式翻滚显示效果的方法
2015/03/12 Javascript
jquery实现可关闭的倒计时广告特效代码
2015/09/02 Javascript
JavaScript常用代码书写规范的超全面总结
2016/09/11 Javascript
jQuery EasyUi 验证功能实例解析
2017/01/06 Javascript
深入理解vue-router之keep-alive
2017/08/31 Javascript
r.js来合并压缩css文件的示例
2018/04/26 Javascript
vue.extend实现alert模态框弹窗组件
2018/04/28 Javascript
Rollup处理并打包JS文件项目实例代码
2018/05/31 Javascript
JS模拟浏览器实现全局搜索功能
2019/09/11 Javascript
vue+vant实现购物车全选和反选功能
2020/11/17 Vue.js
[01:34]DAC2018主赛事第四日五佳镜头 Gh巨牙海民助Miracle-死里逃生
2018/04/07 DOTA
[32:30]夜魇凡尔赛茶话会 第一期01:谁是卧底
2021/03/11 DOTA
Python中的XML库4Suite Server的介绍
2015/04/14 Python
python在回调函数中获取返回值的方法
2019/02/22 Python
windows10下安装TensorFlow Object Detection API的步骤
2019/06/13 Python
Python Pandas对缺失值的处理方法
2019/09/27 Python
Python迷宫生成和迷宫破解算法实例
2019/12/24 Python
解决tensorflow添加ptb库的问题
2020/02/10 Python
python简单的三元一次方程求解实例
2020/04/02 Python
PyQt5实现画布小程序
2020/05/30 Python
Python 排序最长英文单词链(列表中前一个单词末字母是下一个单词的首字母)
2020/12/14 Python
使用html2canvas实现浏览器截图的示例代码
2018/01/26 HTML / CSS
一款利用html5和css3动画排列人物头像的实例演示
2014/12/05 HTML / CSS
北美最大的零售退货翻新商:VIP Outlet
2019/11/21 全球购物
swtich是否能作用在byte上,是否能作用在long上,是否能作用在String上?
2013/03/30 面试题
Delphi CS笔试题
2014/01/04 面试题
医药个人求职信范文
2014/01/29 职场文书
5.12护士节活动总结
2015/02/10 职场文书
详解Vue3使用axios的配置教程
2022/04/29 Vue.js
利用Apache Common将java对象池化的问题
2022/06/16 Servers