javascript WOW.js网站动画使用

1、引入WOW.js插件,搭配animated.css实现动画

<link rel="stylesheet" href="http://cdn.staticfile.org/animate.css/2.0/animate.min.css">
<script src="http://cdn.staticfile.org/wow/0.0.7/wow.min.js"></script>

2、页面元素使用

<div>
<p class="wow fadeInUp" style="padding-top: 0.36rem;"><img src="img/cp_03.png"></p>
<p class="wow fadeInUp" style="padding-top: 0.2rem;"><img src="img/cp_04.png"></p>
<p class="wow fadeInUp" style="padding-top: 0.2rem;"><img src="img/cp_05.png"></p>
</div>

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

<div class="wow slideInLeft" data-wow-duration="2s" data-wow-delay="5s">www.96net.com.cn</div>
<div class="wow slideInRight" data-wow-offset="10" data-wow-iteration="10"></div>

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

posted @   学无边涯  阅读(137)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 25岁的心里话
· 闲置电脑爆改个人服务器(超详细) #公网映射 #Vmware虚拟网络编辑器
· 零经验选手,Compose 一天开发一款小游戏!
· 因为Apifox不支持离线,我果断选择了Apipost!
· 通过 API 将Deepseek响应流式内容输出到前端
点击右上角即可分享
微信分享提示