ScrollReveal插件使用
最近发现了一个网站插件，界面视口滚动时，到达对应视图的元素可以重复出现动画，可以说对于开发网站，提升网站美观起到重要的作用。
文章目录 四、普通使用⭐⭐⭐⭐ 五、配置介绍六、学习总结
提示：以下是本篇文章正文内容，下面案例可供参考
一、是什么✍️
是一个兼容PC端和移动设备的滚动动画库。不同于 WOW.js 的动画只播放一次，.js 的动画根据滚动可以播放一次或无限次。
二、特点
1. 同时兼容PC端和移动端2. 不依赖于jQuery以及animate.css3. 定制性高，使用简单方便快捷4. 不支持低版本浏览器(IE10+)
三、Vue使用⭐⭐⭐⭐⭐ 1.npm安装
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: 500 // 动画开始前的延迟时间, 触发的动画 reset 永远不会使用延迟。distance: '-50px' // 控制元素在显示时移动多远。接受的单位 px|em|%duration: 500 // 控制动画持续时间, 单位为 mseasing: 'ease-in-out' // ‘ease’ ‘ease-out’‘ease-in-out’‘ease-in-out’ // 控制动画如何在起始值和结束值之间转换//opacity: 0.5 // 指定在显示之前它们具有的不透明度。 //rotate: { x: 0, y: 0, z: 0 } // number单位为角度//scale: 0.8 // 指定在显示之前元素的大小。//mobile: true,// 滚动的距离，单位可以用%，rem等});},beforeDestroy() {window.removeEventListener("scroll", this.scrollArea);},
四、普通使用⭐⭐⭐⭐ 1.引入js
<script src="js/ScrollReveal.js" type="text/javascript" charset="utf-8"></script>
2.编写代码
---第一种方法(简便方法)⭐⭐⭐<div data-scroll-reveal="enter top over 1s and move 100px" >dowebok.com</div><div data-scroll-reveal="enter from the bottom after 1s">Hello world!</div><div data-scroll-reveal="wait 2.5s and then ease-in-out 100px">iPhone 6</div>
---第二种方法(常用方法)⭐⭐⭐⭐⭐<section class="wrapper"><h1>Font Awesome字体图标</h1><h3>Font Awesome为您提供可缩放的矢量图标，您可以使用CSS所提供的所有特性对它们进行更改。</h3><div class="feature-list"><div class="feature-item"><i class="fa fa-flag"></i><h4 class="item-tit">一个字库，675个图标</h4><p>仅一个Font Awesome字库，就包含了与网页相关的所有形象图标。</p></div><div class="feature-item"><i class="fa fa-ban"></i><h4 class="item-tit">无需依赖JavaScript</h4><p>Font Awesome完全不依赖JavaScript，因此无需担心兼容性。</p></div><div class="feature-item"><i class="fa fa-arrows-alt"></i><h4 class="item-tit">无限缩放</h4><p>无论在任何尺寸下，可缩放的矢量图形都会为您呈现出完美的图标。</p></div><div class="feature-item"><i class="fa fa-microphone"></i><h4 class="item-tit">如言语一般自由</h4><p>Font Awesome完全免费，哪怕是商业用途。请查看许可。</p></div><div class="feature-item"><i class="fa fa-pencil"></i><h4 class="item-tit">CSS控制</h4><p>Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。</p></div><div class="feature-item"><i class="fa fa-eye"></i><h4 class="item-tit">高分屏完美呈现</h4><p>Font Awesome的矢量图标，将使您的网站在视网膜级的高分屏上大放异彩。</p></div></div></section><script>// 单个项的动画持续时间2s，从下往上，间隔300msScrollReveal().reveal('.feature-item', {distance: '48px', //开始动画距离duration: 2000, //持续时间interval: 300, //间隔时间});</script>
五、配置介绍
1.scrollReveal配置duration number 500 动画持续时间，单位毫秒delay number 0 动画的延迟时间，单位毫秒rotate object/number { x: 0, y: 0, z: 0 } 开始的角度，单位degreesopacity number 0 开始的透明度scale number 0.9 开始的缩放值origin string ‘top’,’right’,’bottom’,’left’ 开始动画的方向distance string 可用任何CSS单位值，如：’20px’,’10vw’,’5%’ 开始动画的距离easing string ‘ease’ ‘ease-out’‘ease-in-out’‘ease-in-out’ 动画的easing效果，可以是任何有效的CSS easing值desktop boolean true / false元素是否在电脑上面执行 mobile boolean true / false元素是否在手机上面执行reset boolean true / false元素是否在容器边界内来回滚动时都产生动画效果useDelay string always / once / onload 延时执行方式（always（一直延时执行），once（只延时执行一次），onload（只在加载时延时执行））viewFactor number 0 视图显示元素百分之多少的时候执行动画（单位：小数，例：0.50 在元素展示超过百分之五十的时候，执行动画）viewOffset: { 视图偏移（把视图抽象成元素移动）top: 0,right: 0,bottom: 0,left: 0,},2.scrollReveal事件beforeReveal 动画开始之前的回调afterReveal 动画结束时放的回调beforeReset 动画开始被重置afterReset 动画重置结束什么是动画重置?执行动画的元素离开屏幕之后就会被重置重置就是重新设置为动画开始之前的默认样式
几种常见的动画效果图, 最常用的还是 ease-in-out
六、学习总结
通过学习该插件，认识到了动画对于网页开发的美观具有多大的作用，使用插件可以使网站更具现代化设计，使得客户更加满意，同时使自我能力提升，初步学习，如有不足，还请指教！！
如果我的博客对你有帮助、如果你喜欢我的博客内容，请 “点赞” “✍️评论” “收藏” 一键三连哦！
