🎈
ふわっとスクロールの軽量ライブラリ•ScrollReveal.js
ページのスクロールをした際に、要素をふわっと表示させるあのアニメーション。
実装の方法を調べると結構な確率でjQueryでの方法がでてきます。
jQueryを使わない方法で探したところ、ScrollReveal.jsを見つけたのでここに備忘録。
軽量で実装&すごく簡単！
CDNで読み込みorパッケージインストール
CDN
公式サイトScrollRevealから読み込みます。
読み込むためにはindex.htmlの中のbodyタグの閉じタグ</body>の直前[1]にscriptタグをおきます。
<script src="https://unpkg.com/scrollreveal"></script>
npm
npmでインストールするには下記コマンドを実行。
npm install scrollreveal --save
セットアップは完了。
動かしたい要素にクラスをつける
<div class="animate">動かしたい要素</div>
ここでは動かしたい箇所にanimateというclassをつけました。
アニメーション実装
jsの方で読み込んである関数を実行するだけ！
ScrollReveal().reveal('.animate');
これで最低限の動きは実装できました。
さらにオプションで、細かい設定が可能。
| オプション | 値 (default) | 説明 |
|---|---|---|
| origin | string (‘bottom’) | 動きの起点。オプション: ‘top’, ‘bottom’, ‘left’, ‘right’ |
| delay | number (0) | アニメーションが始まるまでの時間（1min = 1000） |
| duration | number (500) | アニメーション完了までの長さ（1min = 1000） |
| distance | string('0px') | 要素が移動する距離。（px/em/%） |
| opacity | number (0) | アニメーションの透明度（0~1） |
| rotate | object ( { x: 0, y: 0, z: 0 } ) | 要素の回転の方向 |
| scale | number (1) | 始まる時の要素のサイズ |
もっと詳しいオプションのソースなどはこちら！
要素に各classをつけて、delayを時差設定にして順番に要素が浮きあがるように。
いろいろ細かく設定すると、いろんな動きで遊べそうです！
軽量＆簡単がとにかくいいですね。
サクッと実装の際にはぜひ使ってみてください〜
Discussion