Web業界の動向・情報
投稿日：

【コーディング屋のネタ帳】簡単に実装できるスクロールアニメーション3選

最近のWEBサイトでは、スクロールに合わせて要素がふわっと現れる「スクロールアニメーション」をよく見かけますよね。動きのあるデザインを加えることで、ユーザーの興味を引きつけ、ページにインパクトを与えることができます。ただ、JavaScriptの知識があまりないと「アニメーションの設定が複雑なのでは？」と感じる方も多いでしょう。

そこで今回は、私たち、ファストコーディングのようなコーディング専門会社に頼まなくても、手軽に導入できるスクロールアニメーションのライブラリを3つご紹介します。HTMLにクラスやデータ属性を追加するだけで動かせるものもあるため、JavaScriptに詳しくないWEBデザイナーや、インハウスでサイトを制作している方でも簡単に利用できます。

これらのライブラリで、ページのデザインに動きをプラスし、ワンランク上のWEBサイト作りに挑戦してみましょう！

超簡単！ライブラリ使用+HTMLのみで実装できるスクロールアニメーション

(1)AOS (Animate On Scroll)

https://michalsnik.github.io/aos

AOSは、ライブラリを読み込んでHTMLの要素にデータ属性（例: data-aos="fade-up"）を追加するだけで、スクロールに合わせたシンプルなアニメーションが実装可能です。初心者向けで、簡単な設定だけで複数のアニメーションを実現できます。

ただし、シンプルなスクロールアニメーションに特化しているため『複雑なカスタマイズを行いたい場合』には適していません。ちゃちゃっと簡単にスクロールアニメーションを使いたいときに便利です。

おすすめの用途：シンプルなスクロールアニメーションを多数の要素に適用したい場合

AOS (Animate On Scroll)の導入方法

1ライブラリを読み込む

最も簡単な方法は、CDNを利用する方法です。以下のコードをHTMLの<head>タグ内に追加してください。


<!-- AOS CSSファイル -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.css" />

<!-- AOS JavaScriptファイル -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/aos/2.3.4/aos.js"></script>

CDNを使わず、ローカルに保存して使用する場合は、AOSのGitHubページからファイルをダウンロードして同様に読み込みます。

2AOSの初期化

AOSを有効にするため、JavaScriptで初期化を行います。<script>タグを使い、AOS.init()と記述するだけでOKです。このコードは、HTMLの</body>タグ直前に記述すると良いでしょう。


<script>
  AOS.init();
</script>
3HTML要素にアニメーションを追加する

AOSでは、アニメーションを適用したいHTML要素にdata-aos属性を追加するだけで、さまざまなアニメーションを実現できます。


<div data-aos="fade-up">フェードインしながら上に移動します</div>
<div data-aos="zoom-in">ズームインしながら表示されます</div>
<div data-aos="flip-left">左に回転しながら表示されます</div>

このほかにも、data-aos属性には、以下のような値を指定できます。

  • fade、fade-up、fade-down、fade-left、fade-right
  • flip-left、flip-right、flip-up、flip-down
  • zoom-in、zoom-out
4オプションでアニメーションをカスタマイズする

さらに、AOSにはオプション設定があり、細かくカスタマイズ可能です。以下のデータ属性を追加することで、アニメーションの速度や遅延、タイミングを変更することもできます。

4.1 アニメーションの遅延

data-aos-delayを使うと、アニメーションの発動までの遅延を指定できます（単位はミリ秒）。


<div data-aos="fade-up" data-aos-delay="200">200ミリ秒遅れて表示されます</div>
4.2 アニメーションの持続時間

data-aos-durationを使用すると、アニメーションの実行時間を変更できます。


<div data-aos="fade-up" data-aos-duration="1000">1秒かけて表示されます</div>

そのほかにも様々なパラメータが設定可能なので、ぜひ調べてみてくださいね。

(2)WOW.js + Animate.css

https://wowjs.uk

WOW.jsは、Animate.cssのアニメーションをスクロールでトリガーするためのライブラリで、HTMLのクラス指定だけでアニメーションを追加できます。wowクラスを追加し、data-wow-durationやdata-wow-delayなどのデータ属性を設定するだけで動作するため、設定が非常に簡単です。

一方で、Animate.cssのプリセットに依存するため、特定の動きや複雑なアニメーションには対応しにくいといった面も。

おすすめの用途：シンプルなスクロールアニメーションを少ない手間で実装したい場合

WOW.js + Animate.cssの導入方法

1ライブラリを読み込む

多彩なアニメーション効果が用意されているAnimate.cssと、スクロール位置に応じてAnimate.cssを発動させるWOW.jsはCDNを使って簡単に読み込めます。

Animate.cssを読み込むには、以下のスクリプトタグをHTMLファイルのタグ直前に追加してください。


<!-- Animate.cssの読み込み -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />

Animate.cssをローカルに保存して利用したい場合は、公式サイトからファイルをダウンロードし、CSSファイルをプロジェクト内に配置して読み込みます。

WOW.jsを読み込むには、以下のスクリプトタグをHTMLファイルの</body>タグ直前に追加してください。


<!-- WOW.jsの読み込み -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>

WOW.jsをローカルに保存したい場合は、WOW.jsのGitHubページからダウンロードし、プロジェクト内に配置して読み込みます。

2WOW.jsの初期化

WOW.jsを有効にするために、JavaScriptで初期化を行います。以下のコードを</body>タグ直前に記述してください。


<script>
  new WOW().init();
</script>

これで、WOW.jsがページ上で動作する準備が整いました。

3HTML要素にアニメーションを追加する

Animate.cssとWOW.jsを組み合わせることで、HTML要素にクラスを追加するだけでスクロールアニメーションを設定できます。

3.1基本的な設定

アニメーションを追加したい要素に、wowクラスとAnimate.cssのアニメーションクラス（例: animate__fadeIn）を指定します。以下のようにHTMLにクラスを追加するだけでOKです。


<div class="wow animate__animated animate__fadeIn">この要素がスクロール時にフェードインします</div>
3.1他のアニメーション例

Animate.cssには多彩なアニメーションが揃っており、以下のように設定できます。

  • フェードイン: animate__fadeIn
  • スライドイン: animate__slideInLeft、animate__slideInRight
  • ズームイン: animate__zoomIn
  • 回転: animate__rotateIn
4オプションでアニメーションをカスタマイズする

WOW.jsには、アニメーションの遅延や持続時間を設定するオプションが用意されています。以下のデータ属性を追加することで、アニメーションをカスタマイズできます。

4.1 アニメーションの遅延

data-wow-delay属性を追加すると、アニメーションの開始までの遅延を指定できます（単位は秒）。


<div class="wow animate__animated animate__fadeIn" data-wow-delay="0.5s">0.5秒遅れてフェードインします</div>
4.2 アニメーションの持続時間

data-wow-duration属性を追加すると、アニメーションの実行時間を設定できます。


<div class="wow animate__animated animate__fadeIn" data-wow-duration="2s">2秒かけてフェードインします</div>
4.3 スクロールアニメーションが発動するタイミングを調整

デフォルトでは、要素がビューポートに入ったときにすぐアニメーションが発動しますが、data-wow-offsetを指定すると、指定したピクセル分だけスクロールが進んでからアニメーションを開始させることができます。


<div class="wow animate__animated animate__fadeIn" data-wow-offset="100">
  この要素は、ビューポートに100px入ってからアニメーションが開始します。
</div>

(3)ScrollReveal

https://scrollrevealjs.org

ScrollRevealは、スクロールイベントに応じて要素が滑らかに現れるアニメーションを簡単に実装できるライブラリです。コードが少なく済むため、ウェブページをすっきりと保ちながら動的な演出を加えられます。

JavaScriptの知識やライブラリの学習が必要ですが、豊富なオプションも利用することで、複雑なインタラクションも実現できます。

おすすめの用途：特定のタイミングやエフェクトを駆使して、クリエイティブなアニメーションを作成したい場合（製品紹介ページ、ポートフォリオなど）

ScrollRevealの導入方法

1ライブラリを読み込む

ScrollRevealを簡単に利用する方法として、CDNを使う方法があります。以下のコードをHTMLの<head>タグ内、または</body>タグ直前に追加してください。


<!-- ScrollRevealの読み込み -->
<script src="https://unpkg.com/scrollreveal"></script>

ScrollRevealのファイルをダウンロードして、プロジェクト内に配置することも可能です。ScrollRevealの公式ページやGitHubからファイルをダウンロードしてください。ローカルに保存したファイルをHTMLに読み込みます。

2ScrollRevealの初期化

ScrollRevealを使用するには、ページのロード時に初期化が必要です。以下のコードをHTMLの</body>タグ直前に追加します。


<script>
  ScrollReveal().reveal('.reveal');
</script>

上記のコードで、クラスがrevealの要素にアニメーションが適用されます。

3HTML要素にアニメーションを追加する

アニメーションを追加したいHTML要素にrevealクラスを設定します。ScrollRevealは指定したクラスの要素にアニメーションを適用するので、他の要素には影響しません。


<div class="reveal">この要素がスクロール時にアニメーション表示されます</div>
<div class="reveal">他の要素にも同様のアニメーションが適用されます</div>
4アニメーションのカスタマイズ

ScrollRevealでは、アニメーションの詳細をカスタマイズすることも可能です。以下のようなオプションを指定して、アニメーションの動きや遅延、持続時間などを調整できます。

4.1 アニメーションの遅延 (delay)

delayオプションで、アニメーションが始まるまでの遅延時間を指定できます（単位はミリ秒）。


<script>
  ScrollReveal().reveal('.reveal', { delay: 500 });
</script>

この例では、500ミリ秒遅れてアニメーションが発動します。

4.2 アニメーションの持続時間 (duration)

durationオプションで、アニメーションの実行時間を調整できます（単位はミリ秒）。


<script>
  ScrollReveal().reveal('.reveal', { duration: 1000 });
</script>

この例では、1秒かけてアニメーションが実行されます。

4.3 アニメーションの距離 (distance)

distanceオプションを指定して、アニメーションの移動距離を調整します。値は50pxや100pxなど、任意の距離を指定できます。


<script>
  ScrollReveal().reveal('.reveal', { distance: '100px' });
</script>

この例では、100px移動しながらアニメーションが実行されます。

4.4 アニメーションの方向 (origin)

originオプションを指定すると、アニメーションの開始位置を変更できます。例えば、top、bottom、left、rightのいずれかを指定できます。


<script>
  ScrollReveal().reveal('.reveal', { origin: 'left', distance: '50px' });
</script>

この例では、要素が左から50pxスライドしながら表示されます。

そのほかにも様々なオプションが設定可能なので、ぜひ調べてみてくださいね。

まとめ

いかがでしたか？AOS、ScrollReveal、WOW.js + Animate.cssの3つのライブラリは、どれも手軽に導入でき、少ないコードで動きのあるページを作成できます。プロジェクトの用途やデザインの雰囲気に合わせて、適切なライブラリを選んでみてくださいね。

ただし、より複雑で独自性の高いアニメーションや、全体のデザインに統一感を持たせた動きの演出には、専門的な技術が求められる場合があります。そのような高度なアニメーションをご希望でしたら、ぜひ私たちのような専門のコーディング会社にご相談ください。貴社のブランドイメージにぴったり合った、プロフェッショナルなアニメーションデザインをご提案させていただきます。

この記事を見た人がよく見ている記事

SEO