国外网赚学习

项目EMU教程

关注的频道
QQ:1565238120

滚动页面时会展示各式各样的动画效果

滚动页面时会展示各式各样的动画效果,现在很多网页都有个炫酷的特效:滚动页面时会展示各式各样的动画效果。WOW.js 可帮你实现这种 CSS3 动画效果。

首页 > 建站 > 程序/文档 > 滚动页面时会展示各式各样的动画效果 第 25 次浏览

现在很多网页都有个炫酷的特效:滚动页面时会展示各式各样的动画效果。WOW.js 可帮你实现这种 CSS3 动画效果,通过设置调整可以改变动画的风格、延迟、偏移量等。

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

wow.zip下载
链接: https://pan.baidu.com/s/10ban68fQsedLx4kH1V50dw 提取码: t6n3

使用方法:
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 动画重复的次数

更新时间: 2022-09-08
本文地址:https://www.lzb6.com/website/program/123.html
置顶