ScrollReveal.js

ScrollReveal 是一个JavaScript库，用于在元素进入/离开视口时设置动画。

防止页面闪动的方法(设置了动画的元素, 在页面一开始时在原始位置, 之后页面刷新, 元素才执行动画)

• 在head标签里引入ScrollReveal.js
• 在ScrollReveal.js文件安装完成之前隐藏有动画的元素, 如果有的话 (安装成功时会给html元素添加一个叫sr的class)

html.sr 选中的元素 {
    visibility: hidden;
}

安装

首先引入js文件, 我使用bootCDN

<script src="https://cdn.bootcss.com/scrollReveal.js/4.0.5/scrollreveal.min.js"></script>

引入

他提供了构造函数ScrollReveal()。调用此函数将返回ScrollReveal实例, 我们可以用这个实例做很多事情，但大多数时候我们都会使用这个reveal()方法创建动画

在项目里引入

window.onload = function () {
            ScrollReveal().reveal('选择需要添加动画的元素', 配置);
        }

配置文件直接写在一个对象里, 也可以传入一个对象(如果没有配置则执行默认动画)

ScrollReveal().reveal('.tagline', { delay: 500 });
或者
config={
    delay: 375,
    duration: 500,
    reset: true
}
ScrollReveal().reveal('.tagline', config);

我的项目中动画是 当元素逐渐进入视口时, 元素从下方滑上来, 代码如下

window.onload = function () {
      ScrollReveal().reveal('section span', {
        reset: true,
        origin: 'bottom',
        easing: 'ease-in-out',
        distance: '50px',
        opcity: 0.5,
      });
    }  

可以根据下面的选项自由排列组合

配置选项

config={
    reset: true    // 元素离开视口后返回初始位置, 等待下一次触发, 值为false时动画值触发一次
    origin: 'bottom'     //指定元素在显示时的方向, 需要给options指定非零值才能对origin动画产生明显影响。
                       接受的参数 'top' 'right' 'bottom' 'left' 
    delay: 500     // 动画开始前的延迟时间, 触发的动画 reset 永远不会使用延迟。
    distance: '-50px'   // 控制元素在显示时移动多远。接受的单位 px|em|%
    duration: 500   // 控制动画持续时间, 单位为 ms
    easing: 'ease-in-out'    // 控制动画如何在起始值和结束值之间转换
    opacity: 0.5    //指定在显示之前它们具有的不透明度。        
    rotate: { x: 0, y: 0, z: 0 }     // number单位为角度
    scale: 0.8      //指定在显示之前元素的大小。
}

easing接受参数: ease ease-in ease-in-out ease-out step-start step-end steps() cubic-bezier() // 贝塞尔曲线

几种常见的动画效果图, 最常用的还是 ease-in-out

image.png