页面滚动加载特效脚本WOW.js

一点优化
一点优化
一点优化
478
文章
49
评论
2019年12月25日18:00:58
评论
743看 1117字

现在很多网页都有个炫酷的特效:滚动页面时会展示各式各样的动画效果。WOW.js 可帮你实现这种 CSS3 动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。我现在用的 Begin主题 就在使用这个特效,只是添加了首屏展示的元素不加载动画。
页面滚动加载特效脚本WOW.js

使用方法:

1、引用动画样式文件Animate.css 

<link rel=“stylesheet” href=“css/animate.css”>

2、加载激活WOW.js

<script src=“js/wow.min.js”></script>
<script>

new WOW().init();
</script>

可选择参数:

wow = new WOW({
boxClass:     ‘wow’,      // default

animateClass: ‘animated’, // default

offset:       0,          // default

mobile:       true,       // default

live:         true        // default

})
wow.init();

其中:
boxClass WOW.js需要执行动画的元素的 class
animateClass animated’animation.css 动画的 class
offset 距离可视区域多少开始执行动画
mobile 是否在移动设备上执行动画默认:true,可选:false
live 异步加载的内容是否有效,默认:true,可选:false

3、为HTML添加专有class

<div class=“wow slideInLeft”></div>
<div class=“wow slideInRight”></div>

其中:
slideInLeft和slideInRight分别代表方式,可以改为fadeInUp和fadeInDown等实现不同的动画效果。
还可以这样写:

<section class=“wow slideInLeft” data-wow-duration=“2s” data-wow-delay=“5s”></section>
<section class=“wow slideInRight” data-wow-offset=“10”  data-wow-iteration=“10”></section>

通过添加参数调整动画效果。
data-wow-duration 改变动画时间
data-wow-delay 延迟在动画开始之前
data-wow-offset 距离开始动画(有关浏览器底部)
data-wow-iteration 动画重复的次数

  • SEO话题
  • 这是我的QQ群扫一扫
  • weinxin
  • wp开发交流
  • 我的QQ交流群扫一扫
  • weinxin
wordpress搭建站中站(栏目站)教程 基础建站教程

wordpress搭建站中站(栏目站)教程

wordpress如何搭建栏目站?也就是我们所说的站中站。wordpress因为文章数据库表单只有一个,所以一般会比较卡,当然也有一些SEO站长因为站中站权重比较集中,所以使用站中站的方式做优化,还有...
如何修改WordPress数据库前缀 WP综合教程

如何修改WordPress数据库前缀

之前有一点优化有出一个分布式缓存的教程,但是那个分布式缓存会导致多个网站在一个服务器下面,数据库相同表前缀导致出现错误,所以这里一点优化在这边出三个WordPress修改表前缀的方法,分别是插件,安装...
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: