滚动动画库scrollReveal的介绍
·
首先这里介绍一个参数配置的地址: https://www.jqhtml.com/6913.html
接着来介绍什么是scrollReveal。
scrollReveal是一个兼容PC端和移动设备的滚动动画库。
不同的是 WOW.js 的动画只播放一次,而 scrollReveal.js 的动画可以播放一次或无限次;而且WOW.js依赖animate.css,而 scrollReveal.js 不需要依赖,本身就能创建动画
首先要说明的一件事是:scrollReveal的旧版本是支持添加属性添加动画的,新版本,比如以下给的4.0.5版本,是不支持添加属性的,不过新版本新加了通过class去控制这些滚动动画,比起旧版本的添加属性更加好用
下面我来介绍下scrollReveal.js新版本的使用,旧版本可以自行网上百度,很多博客都有教程:
1.首先我们要导入动画库,可以在GitHub搜索下载或者直接引用外部cdn地址,这里提供一个,如:
<script src="https://cdn.bootcss.com/scrollReveal.js/4.0.5/scrollreveal.js"></script>
2.html中为需要动画效果的标签绑定一个类(自定义),做出要实现的动画的类,如:
<div>
<dd class="ceshi">1</dd>
<dd class="ceshi">2</dd>
<dd class="ceshi">3</dd>
<dd class="ceshi">4</dd>
<dd class="ceshi">5</dd>
<dd class="ceshi">6</dd>
</div>
3.javascript中写入固定格式
1).设置动画配置信息
var config = {
reset: true, // 滚动鼠标时,动画开关(如果为true, 动画可以执行n次)
origin: 'bottom', // 动画开始的方向
distance: '300px',//移动距离
duration: 1000, // 动画持续时间
delay: 0, // 延迟
rotate: { x: 0, y: 0, z: 0 }, // 过度到0的初始角度,关键点想要酷炫的样式主要修改此参数
container: document.documentElement,
opacity: 0, // 初始透明度
scale: 0.8,
viewFactor: 100,//视角,可拉长看到的距离
viewOffset: {//可看到的范围,全屏往里缩
top: 150,
right: 0,
bottom: 150,
left: 0
},
// 回调函数
//当动画开始之前会被触发
beforeReveal: function(domEl){
console.log('动画执行了');
},
//鼠标滚轮滚动之前会被触发
beforeReset: function(domEl){
console.log('滚轮开始---');
},
//动画开始之后会被触发
afterReveal: function(domEl){
console.log('动画结束了');
},
//滚轮滚动之后会被触发
afterReset: function(domEl){
console.log('滚轮结束了');
}
};
2).然后实例化一个scrollReveal对象
window.sr = ScrollReveal();
3).再调用scrollReveal里的reveal方法将scrollReveal内部的动画和css中的标签关联起来
sr.reveal('.ceshi',config);
//参数一:跟html标签关联的类名
//参数二:动画配置
以上是新版的使用方法,旧版本的使用方法这里介绍多个网址:https://blog.csdn.net/qq_30449567/article/details/80438316
更多推荐
已为社区贡献3条内容
所有评论(0)