”筱航科技”教你使用animate.css和wow制作页面动画效果

发布时间:2020-03-20 22:43:08 作者:筱航科技 来源:本站 浏览量(119) 点赞(68)
摘要:animate.css配合wow.min.js实现各种页面滚动效果,有的页面在向下滚动的时候,有些元素会产生细小的动画效果,虽然动画比较小,但却能吸引你的注意,比如刚刚发布的 iPhone 6 的页面,如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

animate.css配合wow.min.js实现各种页面滚动效果

有的页面在向下滚动的时候,有些元素会产生细小的动画效果,虽然动画比较小,但却能吸引你的注意,比如刚刚发布的 iPhone 6 的页面,如果你希望你的页面也更加有趣,那么你可以试试 WOW.js。

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


html引用方式:

<div class="row wow fadeInUp" data-wow-duration="1s" data-wow-delay="1s">

js的引用方式:

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
</script>
<script src="js/bootstrap.min.js">
</script>
<script src="js/wow.min.js">
</script>
<script>
    $(function(){new WOW().init();})
</script>

.page1-title{
    animation-duration: 2s;//一次播放动画的时间
    animation-delay: 0s;//延迟多久开始播放动画
    animation-iteration-count: 1;//动画播放多少次(infinite代表无限循环)
}

筱航科技主营业务: 长春网站建设 - 长春网站制作 -长春网站设计 -长春网站开发 -长春网站优化 -长春网站SEO - 长春网站推广 - 长春网络营销 - 长春网站关键词排名 -长春微信小程序 -长春微信商城 -长春分销商城

二维码

扫一扫,关注我们

声明:本文由【筱航科技】编辑上传发布,转载此文章须经作者同意,并请附上出处【筱航科技】及本页链接。如内容、图片有任何版权问题,请联系我们进行处理。

感兴趣吗?

欢迎联系我们,我们愿意为您解答任何有关网站疑难问题!

筱航科技-您身边的网站建设专家

搜索千万次不如咨询1次

主营项目:网站建设,网络营销,SEO优化,微信小程序开发,LOGO设计,产品包装设计,虚拟主机,域名注册,网站安全检测,微信商城等

立即咨询 184-4312-4181
在线客服
点此联系在线客服!