こんにちは！
2019年11月に入社しました、フロントエンドエンジニアのぜんちゃんです。
もともとはシステム開発の運用をしており、主にSalesforceやデータベースを触っていましたが、自社HPのリニューアルに携るきっかけがあり、Web制作に興味を持ちました。
Webサイト制作の手伝いをしたり、自分でWebアプリケーションを作ってみたりと、スキルアップのために行動していたところ、この度フロントエンドエンジニアとしてLIGに入社することになりました！
フロントの中でも、とくにアニメーション実装に興味があります。アニメーション実装の基礎などをこれからブログ記事書いていきたいと思っておりますので、よろしくお願いします！！
今回は、スクロールしたらふわっと表示されるアニメーションを、ScrollRevealを使って簡単に実装してみたいと思います！
目次
ScrollRevealとは
スクロールして表示される要素をアニメーション化するJavaScriptライブラリ
要素が画面に表示されたら、指定したアニメーションを実行してくれる優れものです。
「ふわっと表示」「下から表示」「遅れて表示」など簡単に実装することができます。
公式サイト：https://scrollrevealjs.org/
ScrollRevealの使い方
ライブラリ読み込み
使い方は簡単。ライブラリをscriptタグで読み込み、対象の要素にクラスを与えてJavaScriptからアニメーションを指定するだけです。
CDNは公式サイトのインストールから読み込みます。
// 最新バージョンの場合
<script src="https://unpkg.com/scrollreveal"></script>
// バージョン指定
<script src="https://unpkg.com/scrollreveal@4.0.0/dist/scrollreveal.min.js"></script>npm でインストールする場合は下記コマンドを実行してインストールして下さい。
npm install scrollreveal --save対象の要素にクラスを与える
次にアニメーションをつけたい要素にクラスを追加します。
土台となるHTMLを用意しました。これにJavaScriptを追加してアニメーションを実装していきます。
今回は、アニメーションをつけたい要素にboxクラスを指定しました。
アニメーション実装
次に、1で読み込んだライブラリからScrollRevealという関数を呼び出し、reveal()メソッドを使ってアニメーションを作成します。
一行！ それだけ！！！
ScrollReveal().reveal('.box');この一行を追加するだけで、スクロールでふわっと表示されるようになります。
ScrollRevealのオプション追加
ScrollRevealでは下記のようにオプションを指定することで、アニメーションの詳細な動きを指定することができます。
ScrollReveal().reveal('.box', {
duration: 800, // アニメーションの完了にかかる時間
viewFactor: 0.2, // 0~1,どれくらい見えたら実行するか
reset: true // 何回もアニメーション表示するか
});どのようなオプションがあるかは公式サイトより確認することができます。
今回は公式サイトの中から、一部抜粋してまとめました。
| オプション | 値 | 説明 |
|---|---|---|
| delay | ミリ秒単位の時間 | アニメーションが実行されるまでの時間 |
| distance | px/em/% | 表示された時に要素が移動する距離 |
| duration | ミリ秒単位の時間 | アニメーションの完了にかかる時間 |
| duration | CSS timing function（ease,ease-inなど） | アニメーションがどのように遷移するか |
| delay | ミリ秒単位の時間 | アニメーションが実行されるまでの時間 |
| interval | ミリ秒単位の時間 | 各公開間の時間 |
| opacity | 0~1 | 表示される前の不透明度 |
| origin | top/right/bottom/left | 要素がどの方向から来るか |
| scale | 数字 | 表示される前の要素のサイズ |
| desktop | true/false | デスクトップブラウザでアニメーションを有効/無効にする |
| mobile | true/false | モバイルブラウザでアニメーションを有効/無効にする |
| reset | true/false | viewportを離れる時に初期化された位置に戻る要素を有効/無効にする |
いろいろな表示アニメーションを試してみる
先ほどのオプションを指定して、いろいろなパターンを試してみました。
まとめ
こういったアニメーションは使いどころを考える必要がありますが、適切な場面で使えば大きな効果が出ると思います。
使う場面があればぜひこちらのライブラリを使用してみてください。
それではまた！ ぜんちゃんでした。
LIGはWebサイト制作を支援しています。ご興味のある方は事業ぺージをぜひご覧ください。
