效果圖?

?效果鏈接：http://website.livequeen.top

介紹?

一、Scrollreveal

ScrollReveal 是一個(gè)?JavaScript?庫(kù)，用于在元素進(jìn)入/離開(kāi)視口時(shí)輕松實(shí)現(xiàn)動(dòng)畫效果。

ScrollReveal 官網(wǎng)鏈接：ScrollReveal

二、animejs

animejs是一個(gè)好用的動(dòng)畫庫(kù)。

animejs官網(wǎng)鏈接：

實(shí)現(xiàn)

一、引入依賴

1、npm安裝

npm install scrollreveal
npm install animejs

?2、代碼中引用

import anime from 'animejs';
import ScrollReveal from 'scrollreveal';

二、代碼示例

?這里以2個(gè)示例來(lái)展示代碼：

1、單純使用scrollreveal來(lái)展示只有頁(yè)面滑動(dòng)到指定class類的時(shí)候才會(huì)展示切入的動(dòng)畫；

2、scrollreveal配合animejs實(shí)現(xiàn)數(shù)字動(dòng)畫（從0開(kāi)始變化到數(shù)據(jù)原本的數(shù)字）；

<!-- 單純使用scrollreveal來(lái)展示只有頁(yè)面滑動(dòng)到指定class類的時(shí)候才會(huì)展示切入的動(dòng)畫 -->
<div class="item1"><div></div><div></div><div></div>
</div>
<div class="item2"><div></div><div></div><div></div>
</div><!-- scrollreveal配合animejs實(shí)現(xiàn)數(shù)字動(dòng)畫（從0開(kāi)始變化到數(shù)據(jù)原本的數(shù)字） -->
<div class="items"><div class="item"><p class="num">1234</p></div><div class="item"><p class="num">2345</p></div><div class="item"><p class="num">6356</p></div>
</div>

?js代碼如下（配置及功能實(shí)現(xiàn)）：

<script>
import anime from 'animejs';
import ScrollReveal from 'scrollreveal';export default {data() {return {// ScrollReveal()公用配置staggeringOption: {delay: 300,distance: '50px',duration: 500,easing: 'ease-in-out',origin: 'bottom'}};},mounted () {this.init()},methods: {/*** 初始化*/init () {this.initScrollReveal();},/*** 初始化initScrollReveal*/initScrollReveal () {// {...this.staggeringOption, interval: 350} => 代表第一個(gè)元素的全部屬性+第二個(gè)元素的屬性// 普通切入動(dòng)畫ScrollReveal().reveal('.item1', {...this.staggeringOption, interval: 350});ScrollReveal().reveal('.item2', {...this.staggeringOption, interval: 350});// 嵌套animejs的數(shù)字動(dòng)畫（從0開(kāi)始變化到數(shù)據(jù)原本的數(shù)字）ScrollReveal().reveal('.items', {beforeReveal: () => {// anime動(dòng)畫-數(shù)字從0開(kāi)始到目標(biāo)anime({targets: '.item .num',innerHTML: el => {return [0, el.innerHTML];},duration: 2000,round: 1,easing: 'easeInExpo'})}});},}
};
</script>