首先我问来看一下这个强大的插件能做出什么效果，下面是我找的一个网站：
接下来看看官网给出的效果：https://scrollrevealjs.org/。
是不是很炫酷，很让人心动，接下来我们介绍如何使用：
（1）安装或引入
a。你可以直接引入：
<script src="https://unpkg.com/scrollreveal"></script>
先别忙着粘贴，记得要加上版本号，如果不指定固定版本号，可能会在解析最新版本时延迟页面加载。
b.或者你可以使用npm进行安装
npm install scrollreveal
安装成功后，在页面进行引入：
import ScrollReveal from 'scrollreveal'
（2）接下来在你需要加效果的html元素处加data-scroll-reveal。
<div class="industry_advantage" >
<h1 class="home_t1" data-scroll_reveal>优势</h1>
<ul data-scroll-reveal>
<li >
<span class="tab_1">icon</span>
<strong>我</strong>
<b>啦啦啦</b>
</li>
<li >
<span class="tab_3">icon</span>
<strong>英语</strong>
<b>啦啦啦</b>
</li>
<li>
<span class="tab_4">icon</span>
<strong>130万</strong>
<b>啦啦啦</b>
</li>
</ul>
</div>
（3）最后在js中写配置
let config = {
after: '0s',
enter: 'bottom',
move: '70px',
over: '2s',
easing: 'ease-in-out',
viewportFactor: 0.33,
reset: true,
init: true
};
window.sr = ScrollReveal();
ScrollReveal().reveal('.industry_advantage>ul, .home_t1' ,config)
当然啦，你如果需要设置不同的动画效果，可以直接在html标签里写，像这样：
<div data-scroll-reveal="wait 0.3s, then enter left and move 40px over 2s">啦啦啦</div>
此时，大功告成啦。