萨龙网络
登录
首页-WordPress文章-jQuery插件-正文

WOW.js简单实现页面滚动动画效果

萨龙龙萨龙龙
jQuery插件
9年前
0
0
1.98W
WOW.js简单实现页面滚动动画效果 在很多网页上,尤其是一些科技企业的产品展示页面,当你滚动页面的时候会看到各式各样的元素动画效果,非常的炫丽,很吸引人。WOW.js就是一款帮助你实现这种CSS3动画效果的javascript插件,不依赖jQuery,使用相当的简单方便,定制性强,可设计成自己喜欢的动画。 萨龙网络开发的主题与网站很多也都使用了WOW.js来实现页面滚动动画效果,所以来分享下使用心得。

下载WOW.js

前往GitHub进行下载:https://github.com/matthieua/WOW

安装WOW.js

1、链接到CSS动画库 在头部添加如下代码链接animate.css:
  1. <link rel="stylesheet" href="css/animate.css">
2、链接WOW.js 在页脚添加如下代码链接WOW.js:
  1. <script src="js/wow.min.js"></script>
3、激活WOW.js
  1. <script>
  2.     var wow = new WOW({
  3.         boxClass: 'wow',
  4.         animateClass: 'animated',
  5.         offset: 50,
  6.         mobile: true,
  7.         live: true
  8.     });
  9.     wow.init();
  10. </script>
代码很好理解,这些元素都是默认的,后面的值是可以根据情况进行修改。offset后面的参数为元素出现在可视区域的范围,当内容在可视区超过50像素时再触发动画,在桌面时因为屏幕较大,所以这个值我们可以设置大些,不然内容都没有看到,动画已经执行了,在移动端就可以设置少些。

向HTML中添加标签

  1. <section class="wow slideInLeft"></section>
  2. <section class="wow slideInRight"></section>
wow是触发动画的元素,页面滚动出现在可视区时会向有wow元素再添加animated元素,动画是由slideInLeft与slideInRight等元素来生成,在animate.css动画库中有很多动画,可以通过演示来查看。

高级选项

1、改变动画时间data-wow-duration
  1. <section class="wow slideInLeft" data-wow-duration="2s"></section>
2、动画延迟加载时间data-wow-delay
  1. <section class="wow slideInLeft" data-wow-delay="5s"></section>
3、开始动画距离data-wow-offset
  1. <section class="wow slideInLeft" data-wow-offset="10"></section>
4、动画重复的次数data-wow-iteration
  1. <section class="wow slideInLeft" data-wow-iteration="10"></section>
在实际使用过程中,最多就是修改下动画的效果,默认的动画并不适合所有的页面,修改CSS动画也是非常简单的事情。 [successbox]让你的页面变的有动感,来使用WOW.js吧![/successbox][scbutton link="http://mynameismatthieu.com/WOW/" target="blank" variation="yellow"]项目演示站点[/scbutton][scbutton link="https://deephoto.salongweb.com" target="blank" variation="red"]Deephoto主题动画演示[/scbutton][scbutton link="http://siquan.salongweb.com/" target="blank" variation="blue"]思泉科技官网动画演示[/scbutton]
标签:
本文原创,作者:萨龙龙,其版权均为萨龙网络所有。
如需转载,请注明出处:https://salongweb.com/wow-js.html
萨龙龙

萨龙龙

侠客
一个平平常常的人,热爱生活、旅行和摄影,骑行去过西藏,一直计划再去。14年从江西骑行来到大理,现栖居于洱海边,食人间烟火,过简单生活,做简约设计!
1342.11M345.33W3.40W
分享:
Adobe photoshop设计时如何使用图标字体
Adobe photoshop设计时如何使用图标字体上一篇
WordPress按角色获取可分页的用户列表并显示最新文章下一篇
WordPress按角色获取可分页的用户列表并显示最新文章
相关文章
总数:6

jQuery 显示与隐藏更多内容插件 readmore.js

开发一个WordPress文章筛选功能时,因为选项较多,默认只显示一行,可通过更多与关闭按钮来切换内容,使用到强大实用且轻巧的jQuery…
萨龙龙萨龙龙
jQuery插件
7年前
0
0
1.66W
0

jQuery无限加载更多插件Infinite Ajax Scroll支持图片延迟加载

ajax加载更多内容相当普遍了,萨龙龙在开发主题的过程中找了很多方法都不尽完美,jQuery.ias插件是相对完美的一款。 ias全称是I…
萨龙龙萨龙龙
jQuery插件
10年前
0
0
2.17W
0

jQuery 强大丰富的响应式弹出框插件 fancyBox3

fancyBox3是一款优秀的弹出框Jquery插件,之前使用过很多LightBOX弹窗插件,功能都很强大,fancyBox3相对来说,…
萨龙龙萨龙龙
jQuery插件
7年前
0
0
4.03W
0

jQuery智能筛选布局排序插件Isotope的介绍

Isotope是一个优秀的jQuery插件能够对一组页面元素进行筛选、排序、并创建智能布局。利用这个插件,能够对任意给定的一组元素用显示/隐藏效…
萨龙龙萨龙龙
jQuery插件
9年前
0
0
1.84W
0

jQuery完美多平台Lightbox弹窗效果插件Boxer

简介 Boxer是一款基于jQuery的Lightbox效果插件,可用于显示图片、视频、iframe和其他内容,和其他Lightbo…
萨龙龙萨龙龙
jQuery插件
9年前
0
0
1.61W
0

WordPress主题使用jQuery插件Isotope添加作品集筛选功能

上一篇文章我们介绍了Isotope,功能强大,效果出众的jQuery插件,但是文章中的代码并不能使用在项目中,所以今天通过Wordpress主题…
萨龙龙萨龙龙
jQuery插件, WordPress
9年前
0
0
1.81W
0
评论表单游客 您好,欢迎参与讨论。
请输入昵称
请输入邮箱
请输入网址
0 / 100
评论列表
总数:0
萨龙网络
暂无评论,第一个评论下?