首先这里介绍一个参数配置的地址: 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

Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐