【社労士解説】ジョブ型雇用時代におけるフリーランスの生存戦略とは?
- コラム
- とは
- フリーランス/個人事業主
Webサイトやスマホアプリで、コンテンツがふんわりと浮かび上がるように表示されるのをよく目にします。これは「フェードイン」と呼ばれるアニメーションで、Microsoft PowerPointでもお馴染みの表現です。
フェードインアニメーションは非常にシンプルですが、そのぶん視認性をさまたげず鬱陶しさがないため人気です。Web制作の現場では、お客様から「フェードインを実装してほしい」と依頼されることも多いのではないでしょうか?
今回はそんなフェードイン表現を最短5秒で実装できるJavaScript製ライブラリ『ScrollReveal』をご紹介します。
ScrollRevealは、HTML要素がビューポート(画面)に表示される際のアニメーションを追加するためのJavaScript製ライブラリです。
ScrollRevealの利用には、以下のようなメリットがあります。
では、ScrollRevealの基本的な使い方を見ていきます。
今回の例では、文字が入力されている「段落」にフェードイン効果を加えます。
HTMLファイルのheadタグ内に以下のコードを入力し、ScrollRevealを読み込みます。
<head>
<script src="https://unpkg.com/scrollreveal"></script>
</head>
CSSセレクターを使ってアニメーションさせる要素を指定します。今回は、フェードインさせたい段落にクラス名を設定して識別することにします。
以下のようにpタグにクラスをつけましょう。
<p class="animetion">
この段落をフェードインさせてみましょう!
</p>
次はJavaScriptのコードを書いていきます。
ScrollReveal().reveal('.クラス名');
「.reveal(”)」の中にはアニメーションさせる要素名やクラス名などを入力します。もしアニメーションさせる要素がpタグすべてなら、「p」と入力します。
これだけで実装完了です。この3ステップはほぼコピペのみで完了するため、5秒程度で終わります。
以下で動作を確認してみてください。
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 |
では実際に、オプションを使ってカスタマイズした例をご紹介します。
こちらは定番の、記事などのカード要素をスライドインさせている例。オプションのdistanceとoriginを使って、初期設定とは異なり右から左に移動しながら表示されるようにしています。
お次はdurationオプションを使い、段落をゆっくりと表示するようにした例。コーポレートサイトのアイキャッチ画面上に配置するキャッチフレーズなどに使える効果でしょう。
rotateオプションを使えば、要素をくるっと回転させながら表示させることもできます。派手なアニメーションなので使い所は限られますが、おもしろい効果です。
ScrollRevealはjQueryなどの他のライブラリに依存せず、わずか5秒程度でフェードインアニメーションを実装できるJavaScriptライブラリです。
オプションが豊富で、かつ自由に組み合わせて使えるため、フェードイン以外にスライドインやターン(回転)なども実現可能。CDNを利用できてファイルが軽量なため、手軽にプロジェクトに取り入れられます。
今後フェードインアニメーションを実装したいときは、ScrollRevealを導入してはいかがでしょうか。
(執筆:fuzuki 編集:齊藤颯人)