モンスターアカデミア 広告

jQuery不要で最短5秒!ScrollRevealでフェードインを簡単実装してみよう

Webサイトやスマホアプリで、コンテンツがふんわりと浮かび上がるように表示されるのをよく目にします。これは「フェードイン」と呼ばれるアニメーションで、Microsoft PowerPointでもお馴染みの表現です。

フェードインアニメーションは非常にシンプルですが、そのぶん視認性をさまたげず鬱陶しさがないため人気です。Web制作の現場では、お客様から「フェードインを実装してほしい」と依頼されることも多いのではないでしょうか?

今回はそんなフェードイン表現を最短5秒で実装できるJavaScript製ライブラリ『ScrollRevealをご紹介します。

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 編集:齊藤颯人)

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

高単価なお仕事でキャリアを広げませんか?

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 28,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ