CSSアニメーションの実装もこれで簡単！ さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween
Post on:2022年6月21日
sponsors
Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。
実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。
スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。
ScrollBtween
ScrollBtween -GitHub
ScrollBtweenの特徴
ScrollBtweenは、Webページのドキュメント（任意のDOM要素）をスクロール位置に関連してCSSのさまざまなプロパティの値を変化（トゥイーン）させるスクリプトです。ネイティブのJavaScriptで実装されており、依存関係はなし。すべての主要なブラウザをサポートしています。
MITライセンスで、商用プロジェクトでも無料で利用できます。
CSSの複数のプロパティを同時にトゥイーンさせたり、同じプロパティに複数のトゥイーンを設定できます。下記はショーケースの一つで、複数のプロパティが同時にトゥイーンしているのが分かると思います。
ScrollBtweenのデモ
デモではScrollBtweenの挙動が分かるシンプルなアニメーションを楽しめます。
Color
スクロール位置によって、背景のカラー（background-color）が変化します。グラデーションにも対応しています。
Image reveal
画像のぼやけたバージョンを表示し、スクロールで元の画像を表示します。
Page progress
最近のWebページで見かけますね、スクロール位置に基づくプログレスバー。
Parallax
パララックスは視差効果を与えるもので、2つの画像を異なるタイミングで動かします。
Star wars
スターウォーズのクレジットみたいなエフェクト。
Text background clip
大量のテキストを背景画像でクリップします。
Texts slides
テキストのスペーシングとスケールを変化させ、次々に表示します。
ScrollBtweenの使い方
Step 1: 外部ファイル
当スクリプトを</body>の直前に外部ファイルとして記述します。
|
1 2 3 4 5 6 7 |
<html> <body> <!-- 当スクリプト --> <script src="path/to/scroll-btween.js"></script> </body> </html> |
オプションとして、アニメーションをよりスムーズにするola.jsを使用できます。
|
1 2 3 4 5 6 7 8 9 |
<html> <body> <!-- オプション - scroll-btween.jsの上に記述 --> <script src="path/to/ola.min.js"></script> <!-- 当スクリプト --> <script src="path/to/scroll-btween.js"></script> </body> </html> |
Step 2: アニメーションの設定
ScrollBtweenの構文は、CSS値にインラインで記述します。トゥイーンはいくつでも設定でき、同じプロパティに複数のトゥイーンを設定することもできます。基本書式は、下記の通りです。
|
1 2 |
<div croll-btween="[DOM要素のid]" data-[CSSのプロパティ]="|[値1の最初の値] to [値1の変化後の値]|...|[値2の最初の値] to [値2の変化後の値]|..."></div> |
デモにあった背景のカラーを変化させる場合は、下記のようになります。
|
1 2 |
<div scroll-btween="foo" data-background-color="rgb(|255 to 10|,|50 to 90|,|122 to 40|)"></div> |
テキストの配置を変更（left値）させる場合は、下記のようになります。
|
1 |
<p scroll-btween="foo" data-left="|-50 to 50|%">A paragraph</p> |
詳しくは、ドキュメントをご覧ください。
sponsors
