ライターは「こたつ記事」と「取材記事」どちらに特化すべき？
- “文章下手”でも稼げるライターになる方法
- Webライター
- 連載
Webサイトやスマホアプリで、コンテンツがふんわりと浮かび上がるように表示されるのをよく目にします。これは「フェードイン」と呼ばれるアニメーションで、Microsoft PowerPointでもお馴染みの表現です。
フェードインアニメーションは非常にシンプルですが、そのぶん視認性をさまたげず鬱陶しさがないため人気です。Web制作の現場では、お客様から「フェードインを実装してほしい」と依頼されることも多いのではないでしょうか？
今回はそんなフェードイン表現を最短5秒で実装できるJavaScript製ライブラリ『ScrollReveal』をご紹介します。
ScrollRevealとは
ScrollRevealは、HTML要素がビューポート（画面）に表示される際のアニメーションを追加するためのJavaScript製ライブラリです。
ScrollRevealの利用には、以下のようなメリットがあります。
- jQueryなど他のライブラリに依存せず、単体で使える
- ScrollReveal用のCSSファイルが不要
- JavaScriptファイル自体も軽量
- CDNも利用できる
- オプションが豊富で柔軟にカスタマイズできる
- わずか5秒程度でも実装可能なほど簡単
ScrollRevealの基本的な使い方
では、ScrollRevealの基本的な使い方を見ていきます。
今回の例では、文字が入力されている「段落」にフェードイン効果を加えます。
1. ライブラリの読み込み
HTMLファイルのheadタグ内に以下のコードを入力し、ScrollRevealを読み込みます。
<head>
<script src="https://unpkg.com/scrollreveal"></script>
</head>
2. アニメーションさせる要素の指定
CSSセレクターを使ってアニメーションさせる要素を指定します。今回は、フェードインさせたい段落にクラス名を設定して識別することにします。
以下のようにpタグにクラスをつけましょう。
<p class="animetion">
この段落をフェードインさせてみましょう！
</p>
3. アニメーションの適用
次はJavaScriptのコードを書いていきます。
ScrollReveal().reveal('.クラス名');「.reveal(”)」の中にはアニメーションさせる要素名やクラス名などを入力します。もしアニメーションさせる要素がpタグすべてなら、「p」と入力します。
これだけで実装完了です。この3ステップはほぼコピペのみで完了するため、5秒程度で終わります。
以下で動作を確認してみてください。
ScrollRevealのオプション
ScrollRevealはオプションが豊富。複数組み合わせることで、さまざまなアニメーション効果を実装できます。
オプションを設定するときは、基本的な使い方の項で記述したコードへ以下のように書き足してください。
//ScrollReveal().reveal('.クラス名'); この行を次のように変える
ScrollReveal().reveal('.クラス名', {オプション名: 値});また、オプションを複数設定する場合は、オブジェクト変数を使うと便利です。コードの可読性が上がり、メンテナンスがしやすくなります。
//ScrollReveal().reveal('.クラス名', {オプション名: 値, オプション名2: 値2}); この行を次のように変える
var オブジェクト名 = {
オプション名: 値,
オプション名2: 値2,
};
ScrollReveal().reveal('.animetion', オブジェクト名);
今回は一部のみですが、便利なオプションをご紹介します。
| オプション名 | 効果・説明 | 設定する値 | デフォルト値 |
| delay | アニメーションが始まるまでの時間を、ミリ秒（1秒＝1000ミリ秒）単位で設定する。
数値を大きくするほど、アニメーションが始まるまでの時間が遅くなる。 |
数値 | 0 |
| distance | 要素を動かしながら表示したい場合に使うオプション。
要素を表示する際、どのくらい動かすかを設定する。 ※要素がどの方向から動いてくるかを変更するには、オプション「origin」を設定する。 |
px / em / % / | 0px |
| duration | アニメーションが完了するまでの時間を、ミリ秒（1秒＝1000ミリ秒）単位で設定する。
数値を大きくするほど、アニメーション完了までの時間が遅くなる。 |
数値 | 600 |
| opacity | アニメーション開始時の要素の不透明度を設定する。
数値を小さくするほど透明に近くなる。初期設定は透明を表す0。 |
数値（0〜1まで） | 0 |
| origin | アニメーション開始時に、要素がどの方向から動いてくるかを設定する。 | top、right、bottom、left | bottom |
| rotate | 要素を回転させながら表示したい場合に設定する。 | 数値（X軸、Y軸、Z軸の3次元設定を行う） | x: 0, y: 0, z: 0 |
| scale | 要素を拡大縮小しながら表示したい場合に使うオプション。
アニメーション開始時の要素の大きさを設定する。 |
数値 | 1 |
| desktop | デスクトップブラウザでアクセスした際に、アニメーションを有効にするか、無効にするかを設定する。 | true（有効）、false（無効） | true |
| mobile | モバイル端末ブラウザでアクセスした際に、アニメーションを有効にするか、無効にするかを設定する。 | true（有効）、false（無効） | true |
| useDelay | アニメーションをいつ発生させるかを設定する。
要素が画面に映る時は常にアニメーションさせるのか、1回アニメーションした要素は対象外とするのか、ページを読み込んだときに実行するのかを決められる。 |
always（いつでもアニメーション適用）、once（最初の1回だけアニメーション適用）、onload（ページを読み込んだ時にアニメーション適用） | true |
ScrollRevealのサンプルコード
では実際に、オプションを使ってカスタマイズした例をご紹介します。
こちらは定番の、記事などのカード要素をスライドインさせている例。オプションのdistanceとoriginを使って、初期設定とは異なり右から左に移動しながら表示されるようにしています。
お次はdurationオプションを使い、段落をゆっくりと表示するようにした例。コーポレートサイトのアイキャッチ画面上に配置するキャッチフレーズなどに使える効果でしょう。
rotateオプションを使えば、要素をくるっと回転させながら表示させることもできます。派手なアニメーションなので使い所は限られますが、おもしろい効果です。
まとめ
ScrollRevealはjQueryなどの他のライブラリに依存せず、わずか5秒程度でフェードインアニメーションを実装できるJavaScriptライブラリです。
オプションが豊富で、かつ自由に組み合わせて使えるため、フェードイン以外にスライドインやターン（回転）なども実現可能。CDNを利用できてファイルが軽量なため、手軽にプロジェクトに取り入れられます。
今後フェードインアニメーションを実装したいときは、ScrollRevealを導入してはいかがでしょうか。
（執筆：fuzuki 編集：齊藤颯人）
人気のフリーランス・副業求人
IoTの開発プロジェクト！子どもが楽しくハミガキできるゲームコンテンツを開発するUnityエンジニア募集！
- #スタートアップ
職種：iOS/Androidアプリエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
IoTの開発プロジェクト！ヘルスケア・医療データの処理、分析、解析、データマイニングを得意とするインフラエンジニア募集！
- #スタートアップ
職種：バックエンドエンジニア
時給：2,500円 〜
働き方：どちらでも可
エリア：東京都
Web制作をリードするフロントエンド構築、WordPress実装が可能なエンジニア募集！
職種：フロントエンドエンジニア
時給：2,500円 〜
働き方：リモート希望
エリア：東京都
事務員出身の文系プログラマ。VBAとAccessを使った事務仕事の効率化にハマり、Webエンジニアへ転職。 現在は本業を事務に戻し、副業プログラマをやっています。
