Blog スタッフブログ

スクロールに応じてトリガーするJavaScriptのライブラリ「ScrollTrigger」

Category | Blog
/ 13,342views

こんにちはCTOの奥田です。

先日、父が80歳の誕生日を迎えました。
孫や曾孫と会えるのが嬉しいようで、喜んでいる顔を見ていたらこちらも嬉しくなります。これからもコロナが収束を迎え、時間が取れたらできる限り会わせてあげようと思います。

さて、最近では参考サイトのどのサイトでもスクロールアニメーションを見かけます。
今回はVanilla.jsで動く、スクロールに応じてイベントをトリガーしてくれるライブラリ「ScrollTrigger」をご紹介したいと思います。

Table of contents

  1. ScrollTriggerとは
  2. インストール
  3. 使い方
  4. オプション
  5. カスタマイズ
  6. さいごに

ScrollTriggerとは

ScrollTriggerとは文字通りスクロールに応じてイベントをトリガーしてくれるライブラリです。
それと同時に[.visible][.invisible]classを付与してくれるのでCSSで簡単にアニメーションさせることが出来ます。
同じような挙動であれば Intersection Observer APIを使えば実装できそうですがScriptを書くのが苦手な人にはとても重宝するのではないでしょうか。

インストール

まずはインストール方法です。
npmでインストールしimportするか、CDNでscriptを読み込んでください。

npm
npm install @terwanerik/scrolltrigger --save
cdn
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollTrigger/1.0.3/ScrollTrigger.min.js"><script>

使い方

使い方は以下です。ES6方式のimportを使用した場合とscriptを読み込んだ場合とで少し記法が違うので注意してください。

import ScrollTrigger from '@terwanerik/scrolltrigger'
const trigger = new ScrollTrigger()
trigger.add('[data-trigger]')

scriptを読み込んだ場合は.default()が必要です。

<script src="/path/to/ScrollTrigger.min.js"><script>
<script>
    const trigger = new ScrollTrigger.default()
    trigger.add('[data-trigger]')
<script>

これだけでdata-trigger属性を付与した要素にscrollに応じて[.visible][.invisible]が付与されます。
トランジションを効かせてあげることでアニメーションしながら表示できます。

.visible, .invisible {
    opacity: 0.0;
    transition: opacity 0.5s ease;
}
.visible {
    opacity: 1.0;
}

マルチクラスを付与するか内包した要素にスタイルを当てることで様々なアニメーションが実装出来ます。

.visible.translateY,.invisible.translateY {
    transform: translateY(100px);
    transition: all 0.5s cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.visible.translateY {
    transform: translateY(0);
}

オプション

.add()の第二引数で一度だけトリガーさせる(once)設定や、トリガーさせる位置(offset)や、付与するclassの設定が可能です。

trigger.add('[data-trigger]', {
    once: true,
    offset: {
        element: {
            x: 0,
            y: (trigger, rect, direction) => {
                return 0.2
            }
        },
        viewport: {
            x: 0,
            y: (trigger, frame, direction) => {
                return trigger.visible ? 0 : 0.2
            }
        }
    },
    toggle: {
        class: {
            in: 'visible',
            out: ['invisible', 'extraClassToToggleWhenHidden']
        },
        callback: {
            in: null,
            visible: null,
            out: (trigger) => {
                return new Promise((resolve, reject) => {
                    setTimeout(resolve, 10)
                })
            }
        }
    },
})

offsetは少し複雑なので簡単にご説明させていただきます。
offsetは[viewport]と[element]の2つの基準を指定します。
100%を1として算出し、viewportのyが0.2であればwindowの高さの上下から20%の位置にelementが来たときにトリガーされます。
elementはviewportの基準に重なる位置を指しています。
elementのyが0.2であり、viewportのyが0.2の場合、windowの高さの上下から20%の位置にelementの上下20%の位置が来たときにトリガーされます。
また、引数のtriggerのvisibleがfalseの時のみにすることで非表示時のアニメーションを見せないようにすることが出来ます。
詳しくは下記DEMOをご確認ください。

カスタマイズ

toggleのcallbackオプションでCSSだけでなくJavaScriptで独自のアニメーションを実装することも可能です。

toggle: {
    callback: {
        in: (trigger) => {
            // trigger.elementに現在のtriggerされた要素が入ります。
        }
    }
}

これを利用してanime.jsを活用して文字を1文字ずつアニメーションさせたDEMOが以下です。

さいごに

今回はスクロールに応じてイベントをトリガーしてくれるライブラリ「ScrollTrigger」をご紹介させていただきました。
スクロールでのアニメーションはやりすぎるとうるさく感じられることもあるとは思いますが、うまく使えば重要なコンテンツにユーザーの目を引くことが出来ます。
比較的簡単に実装できますのでぜひ使ってみてください。
少しでも皆様の参考になれば幸いです。

Category | Blog
Author | Mineo Okuda / 13,342views

Company information

〒650-0024
神戸市中央区海岸通5 商船三井ビルディング4F

Contact us

WEBに関するお問い合わせは
078-977-8760 (10:00 - 18:00)