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 相关文章推荐
js 刷新页面的代码小结 推荐
Apr 02 Javascript
jquery动画4.升级版遮罩效果的图片走廊--带自动运行效果
Aug 24 Javascript
JS实现点击图片在当前页面放大并可关闭的漂亮效果
Oct 18 Javascript
jquery实现图片灯箱明暗的遮罩效果
Nov 15 Javascript
使用iframe window的scroll方法控制iframe页面滚动
Mar 05 Javascript
Jquery实现点击按钮,连续地向textarea中添加值的实例代码
Mar 08 Javascript
JS中判断null、undefined与NaN的方法
Mar 26 Javascript
常用的JavaScript模板引擎介绍
Feb 28 Javascript
深入理解ECMAScript的几个关键语句
Jun 01 Javascript
JS实现搜索框文字可删除功能
Dec 28 Javascript
关于Promise 异步编程的实例讲解
Sep 01 Javascript
JS运动改变单物体透明度的方法分析
Jan 23 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
ninety plus是什么?ninety plus咖啡好吗?
2021/03/04 新手入门
php实现简单洗牌算法
2013/06/18 PHP
微信获取用户地理位置信息的原理与步骤
2015/11/12 PHP
PHP常用函数总结(180多个)
2016/12/25 PHP
PHP基于mcript扩展实现对称加密功能示例
2019/02/21 PHP
PHP查找一列有序数组是否包含某值的方法
2020/02/07 PHP
如果文字过长,则将过长的部分变成省略号显示
2006/06/26 Javascript
JavaScipt中的Math.ceil() 、Math.floor() 、Math.round() 三个函数的理解
2010/04/29 Javascript
ie与ff下的event事件使用介绍
2013/11/25 Javascript
用jquery模仿的a的title属性的例子
2014/10/22 Javascript
jquery遍历函数siblings()用法实例
2015/12/24 Javascript
JavaScript对象参数的引用传递
2016/01/14 Javascript
Nodejs爬虫进阶教程之异步并发控制
2016/02/15 NodeJs
Bootstrap布局组件教程之Bootstrap下拉菜单
2016/06/12 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
2017/03/13 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
理解Angular的providers给Http添加默认headers
2017/07/04 Javascript
原生JS实现的雪花飘落动画效果
2018/05/03 Javascript
vue 监听某个div垂直滚动条下拉到底部的方法
2018/09/15 Javascript
p5.js码绘“跳动的小正方形”的实现代码
2019/10/22 Javascript
Python的爬虫程序编写框架Scrapy入门学习教程
2016/07/02 Python
python对象及面向对象技术详解
2016/07/19 Python
Python中%是什么意思?python中百分号如何使用?
2018/03/20 Python
对python使用http、https代理的实例讲解
2018/05/07 Python
Python numpy线性代数用法实例解析
2019/11/15 Python
HTML5新增加的功能详解
2016/09/05 HTML / CSS
联想哥伦比亚网上商城:Lenovo Colombia
2017/01/10 全球购物
神话般的珠宝:Ross-Simons
2020/07/13 全球购物
党的群众路线教育实践活动心得体会
2014/03/03 职场文书
大学迎新晚会主持词
2014/03/24 职场文书
降消项目实施方案
2014/03/30 职场文书
生日庆典策划方案
2014/06/02 职场文书
市场策划求职信
2014/08/07 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
推荐信范文大全
2015/03/27 职场文书
详解Nginx的超时keeplive_timeout配置步骤
2022/05/25 Servers