ScrollReveal插件使用

👇🏻👇🏻👇🏻

👨‍🎓 最近发现了一个网站插件ScrollReveal，界面视口滚动时，到达对应视图的元素可以重复出现动画，可以说对于开发网站，提升网站美观起到重要的作用。

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、ScrollReveal是什么✍️

ScrollReveal是一个兼容PC端和移动设备的滚动动画库。不同于 WOW.js 的动画只播放一次，ScrollReveal.js 的动画根据滚动可以播放一次或无限次。

---

二、ScrollReveal特点📖

	  1. 同时兼容PC端和移动端
	  2. 不依赖于jQuery以及animate.css
	  3. 定制性高，使用简单方便快捷
	  4. 不支持低版本浏览器(IE10+)

三、Vue使用⭐⭐⭐⭐⭐

1.npm安装scrollReveal

npm install scrollreveal

2.引入到组件中

import scrollReveal from ‘scrollreveal’;

3.在data中注册

data() {
   
    return {
   
      scrollReveal: scrollReveal(), //页面滚动动画
     }
}

4.项目中使用🧱

<div class="feature-item">demo</div>
 mounted() {
   
	 window.addEventListener("scroll", this.scrollArea);
	
	 this.scrollReveal.reveal(".feature-item", {
   
	     	reset: true    
	     	// 元素离开视口后返回初始位置, 等待下一次触发, 值为false时动画值触发一次
			origin: 'bottom'     
			// 指定元素在显示时的方向, 需要给options指定非零值才能对origin动画产生明显影响。
			// 接受的参数 'top' 'right' 'bottom' 'left' 
			delay: