コピペでできるScrollTriggerを使ったスクロールトリガーとアニメーションのスニペット

8分

SHARE

ScrollTriggerは、その名の通りスクロールに応じてイベントをトリガーしてくれるJavaScriptのライブラリです。

記念は、アニメーション制作のJavaScriptの定番ライブラリ「GSAP」がありますが、容量が「65KB程度です、一方、ScrollTriggerは「13KB程度」と容量も小さく、簡単に実装もできるので好きなライブラリです。

かかかず
かかかず

GSAPほどゴリゴリのアニメーションはいらない人には、こっちのScrollTriggerはいい感じです。

そんなScrollTriggerについてご紹介していきますので、ぜひ最後までご覧いただけたら嬉しいです。

ScrollTriggerとは？

ScrollTrigger、は名前の通りスクロールに応じてイベントをトリガーしてくれるネイティブなJavaScriptのライブラリです。

ScrollTrigger 公式より

ScrollTriggerは約2年くらい前のライブラリで、定番アニメーションライブラリ「GSAP」とは異なり、比較的寛容なMITライセンスであるところは嬉しいところです。

MITライセンスとは？

ソフトウェアを自由に扱ってよいこと、再頒布時に著作権表示とライセンス表示を含めること、作者や著作権者はいかなる責任も負わない等、「寛容型オープンソースライセンス」に属するライセンスです。

かかかず
かかかず

商用利用や再配布等々、自由に無料でつかうことができます。

外部リンク ScrollTrigger

ScrollTriggerで実装できるスクロールトリガーのサンプル

早速「ScrollTrigger」を使ったサンプルです。

この記事でこれらができるコードもあわせて紹介していますが、まずはできることのイメージとしてこれらをご覧ください。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

かかかず
かかかず

ちなみにこの記事の h2 タグにも「ScrollTrigger」でフェードインさせるようにしてるので、合わせてご覧ください。

実装の手順と方法

手順と方法

実装の手順と方法は、全部で4つのSTEPになっています。順に解説していきます。

ScrollTriggerの読み込み

まずは、ScrollTriggerの読み込みの設定を行いましょう。

ScrollTriggerは、CDNで配信されているので以下のコードを<head>〜</head> に記述します。

HTML 

<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.3/ScrollTrigger.min.js"></script>

アニメーションを付けたいHTMLに属性を記述

次に、ScrollTriggerを適用させたいHTMLのタグの中に、data-trigger を記述させます。

例えば、p タグに適用させたい場合は以下の通りです。

HTML 

<p data-trigger="" class="fadeInLeft">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

JavaScriptを使って一気に data-trigger を付与する場合

この記事のように、例えば一律で本文内の h2 タグに data-trigger を全て付けたい場合、一個一個つけるのはなかなか大変です。

その場合いろんな方法がありますが、ネイティブなJavaScriptを使って一気に付与することもできます。

以下は、当サイトでも利用しているWordPressテーマ「SANGO」の場合のコードです。

JavaScript 

const postH = document.querySelectorAll('.entry-content h2');
for (i = 0; i < postH.length; i++) {
postH[i].setAttribute("data-trigger","");
postH[i].setAttribute("class","fadeInLeft");
}
console.log(postH)

CSSを記述

HTMLで data-trigger 属性を付与した要素は、スクロールに応じて「visible」「invisible」のclass名が付与されます。

このように、CSSのスタイルを当てることで様々なアニメーションが実装出来るので、好みのCSSを記述しましょう。

JavaScriptを記述

最後に、ScrollTriggerを使う為のコードを記述します。オプション等は使わずに単に使う場合は、以下の一文でOKです。

JavaScript 

const trigger = new ScrollTrigger.default()
trigger.add('[data-trigger]')

上記のコードを <body>〜</body>のクロージングタグ直前にコピペすればOKです。

かかかず
かかかず

要素を追加した場合でも、この一文だけでOKです。

利用可能なオプション

開発者が公開中のGitHubでも方法が色々紹介されていますが、一度だけトリガーさせる「once」の設定方法や、付与するclassの設定もオプションで可能です。

JavaScript 

trigger.add('[data-trigger]', {
	// 一回のみ
    once: true,
	//class名の変更
    toggle: {
        class: {
            in: 'animateIn',
            out: 'animateOut'
        }
     },
})

外部リンク ScrollTriggerのGitHub

かかかず
かかかず

色々できるので、気になる方はGitHubも見てみましょう。

スクロールトリガーのサンプルとコード5選

ここでは、「ScrollTrigger」とCSSのアニメーションを掛け合わせ5種類のサンプルを作ってみました。ご覧ください。

透明から徐々に表示

まずは、シンプルに透明の要素がスクロールして到達すると徐々に表示されるスニペットです。

表示させたいHTMLの要素に「data-trigger」を付け、class名は opacityFadeIn でこの表示ができます。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

コードを表示する

HTML 

<p data-trigger class="opacityFadeIn">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS 

/* 透明から表示 */
.opacityFadeIn.visible {
    animation: opacityFadeIn 0.7s ease 0s 1 normal;
}

@keyframes opacityFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

フェードインしながら左から右に背景色が伸びる

スクロールして到達すると、フェードインしながら左から右にオーバーレイ（覆い隠す）で黒い背景色が表示されます。

表示させたい要素に「data-trigger」を付け、class名は curtainLefttoRight です。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

コードを表示する

HTML 

<p data-trigger class="curtain">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS 

/* 左から右にカーテン */
.curtainLefttoRight {
    position:relative;
}
.curtainLefttoRight.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;   
}
.curtainLefttoRight.visible:before {
    display: block;
    content: "";
    position: absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #333;
    animation-name: curtainLeft;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: forwards;
}

@keyframes curtainLeftFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes curtainLeft{
  0% {
    transform-origin:left;
    transform:scaleX(0);
  }
  50% {
    transform-origin:left;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:right;
  }
  100% {
    transform-origin:right;
    transform:scaleX(0);
  }
}

フェードインしながら右から左に背景色が伸びる

今度は、フェードインしながら右から左にオーバーレイ（覆い隠す）で黒い背景色が表示されます。

表示させたい要素に「data-trigger」を付け、class名は curtainRighttoLeft です。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

コードを表示する

HTML 

<p data-trigger="" class="curtainRighttoLeft">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS 

/* 右から左にカーテン */
.curtainRighttoLeft {
    position:relative;
}
.curtainRighttoLeft.visible {
    animation-name: curtainLeftFadeIn;
    animation-duration: 1.2s;
    animation-timing-function: ease-in-out;   
}
.curtainRighttoLeft.visible:before {
    display: block;
    content: "";
    position:absolute;
    z-index: 999;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    transform: scaleX(0);
    background-color: #333;
    animation-name:curtainRight;
    animation-duration:1.2s;
    animation-timing-function:ease-in-out;
    animation-fill-mode:forwards;
}

@keyframes curtainRightFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
@keyframes curtainRight{
  0% {
    transform-origin:right;
    transform:scaleX(0);
  }
  50% {
    transform-origin:right;
    transform:scaleX(1);
  }
  50.001% {
    transform-origin:left;
  }
  100% {
    transform-origin:left;
    transform:scaleX(0);
  }
}

左から右にふわっとフェードイン

スクロールして到達すると、左から右にフェードインしながら表示されます。

表示させたい要素に「data-trigger」を付け、class名は fadeInLeft です。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

コードを表示する

HTML 

<p data-trigger="" class="fadeInLeft">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS 

/* 左から右にふわっとフェードイン */
.fadeInLeft.visible {
    animation: fadeInLeft 0.7s ease 0s 1 normal;
}
/* fadeInLeft */
@keyframes fadeInLeft {
  0% {
    opacity: 0;
    transform: translateX(-30px);
  }
  100% {
    opacity: 1;
  }
}

下から上にふわっとフェードイン

スクロールして到達すると、下から上にふわっとフェードインしながら表示されます。

この場合は、表示させたい要素に「data-trigger」を付け、class名は fadeInBottom です。

ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト

コードを表示する

HTML 

<p data-trigger="" class="fadeInBottom">ダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキストダミーテキスト</p>

CSS 

/* 下から上にフェードイン */
.fadeInBottom.visible {
animation: fadeInBottom 0.7s ease 0s 1 normal;
}

/* fadeInBottom */
@keyframes fadeInBottom {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
  }
}

さいごに

先生

ScrollTriggerは、スクロールトリガー。そして、アニメーションはCSSでスタイルを簡単に当てることができ、非常に使いやすく、カスタマイズもしやすいライブラリです。

かかかず
かかかず

jQuery不要なのも嬉しいところです。

この記事では、数パターンのアニメーションをサンプルとして5個記載しましたが、これ以外にもCSSのアニメーションにはいろんなものがあるので、以下の記事も参考にしてアニメーションを作ってみてください。

CSSのanimationプロパティでできるアニメーション20選

前の記事

バウンスボール
JavaScriptのsetTimeout()でページ切り替え…

次の記事

JavaScriptの.prepend()でページ遷移時に左か…

関連記事

カテゴリーのイラスト

同じカテゴリの記事一覧

ボタンの影

まとめ記事

Article

About

Summary

OTHER

DUB DESiGNはデザインをテーマにしたメディアです。Webデザインに関するHow-toや、WordPressのスニペットなど、デザインの話を中心に、仕事を楽しむすべての方を対象に記事を配信しています。

＞＞ 詳しくはこちら