ScrollTrigger

JavaScriptのScrollTriggerでスクロールインするとぼやけていた文字が徐々に通常表示

2022年4月18日2022年4月19日 3分

JavaScriptのライブラリを使って、簡単なアニメーションを作ってみました。

かかかず

CSSのアニメーションとセットにして作っています。

簡単に実装できる「ライブラリ」と「コード」について解説していきますが、複雑なコードを書く必要がないので、参考にしてもらえたら嬉しいです。

ScrollTrigger
ぼやけていた文字が徐々に表示されるサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

ScrollTrigger

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

以下の記事に詳しくありますが、簡単に実装もできるので個人的にも好きなライブラリです。

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

この記事では、そんなScrollTriggerを使ったスニペットについて解説していきます。

ぼやけていた文字が徐々に表示されるサンプル

早速サンプルですが、スクロールしていきここのブロックがウィンドウ内に表示されると、ぼけけていた文字が徐々に明確になり、表示されます。

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

p タグを対象にしている為、用途のイメージがつきにくいかもしれませんが、h2 タグの見出しや、コピーなどに相性の良いスニペットです。

実装の手順と方法

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

<head>〜</head>の中にScrollTriggerを記述

コードを表示

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

HTMLに data-trigger を記述

スクロールした時に発動をさせたいHTMLに、data-trigger を記述します。

例えば p タグに記述する場合は、<p data-trigger>ダミーテキスト</p> のように記述すればOKです。

CSSを記述

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

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

コードの表示

/* blur */
.blurAnime.visible {
animation: blurAnime 0.7s ease 0s 1 normal;
}

@keyframes blurAnime {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}

JavaScritpを記述

最後に、ScrollTriggerを使う為のコードを記述します。

以下の一文を<body>〜</body>のクロージングタグ直前に記述しましょう。

コードを表示

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

かかかず

これで完了です。

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種類です。ざっくりですが、順に解説していきます。

HTML

はじめに、HTMLの<head>〜</head>の中に、以下のコードを記述してScrollTrigger本体の読み込みをさせます。

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

<head>〜</head>の中に、本体読み込みの記述が完了したら、以下のようにスクロールで発動させたいHTMLタグの中に data-trigger と記述します。

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

これだけでOKです。

JavaScript

ScrollTriggerを使う為に、<body>〜</body>のクロージングタグ直前に記述します。

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

上記は、オプション等は使わずにデフォルトの状態でそのまま使う場合のコードです。

それ以外に、一度だけトリガーさせる「once」の設定方法や、付与するclassの設定もオプションで可能です。

その場合は、開発者が公開中のGitHubでも方法が色々紹介されていまるので、気になった方はご覧なってみてください。

外部リンク ScrollTriggerのGitHub

かかかず

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

CSS

スクロールに応じて「visible」「invisible」のclass名が付与されるので、CSSはそれらのclass名に準じたプロパティを記述していき、@keyframes でアニメーションを作ります。

/* blur */
.blurAnime.visible {
animation: blurAnime 0.7s ease 0s 1 normal;
}

@keyframes blurAnime {
  0% {
    filter: blur(10px);
  }
  100% {
    filter: blur(0);
  }
}

今回は、filter プロパティを使っていますが、これらも含めCSSのアニメーションにはいろんなものがあるので、好みのアニメーションを作ってみてください。