CSSアニメーションの実装もこれで簡単! さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween

Webページ上のあらゆるDOM要素に対して、CSSアニメーションを実装できるスクリプトを紹介します。

実装は簡単です、CSSのプロパティの値を「#fff to #000」「0 to 100」のように記述して、#fffから#000にトゥイーンさせ、0から100にトゥイーンさせます。

スクロールで背景色を変化させたり、ぼやけた画像をくっきりと表示したり、スクロール位置に基づくプログレスバーやパララックスも簡単に実装できます。

CSSアニメーションの実装もこれで簡単! さまざまなプロパティの値をトゥイーンさせるスクリプト -ScrollBtween

ScrollBtween
ScrollBtween -GitHub

ScrollBtweenの特徴

ScrollBtweenは、Webページのドキュメント(任意のDOM要素)をスクロール位置に関連してCSSのさまざまなプロパティの値を変化(トゥイーン)させるスクリプトです。ネイティブのJavaScriptで実装されており、依存関係はなし。すべての主要なブラウザをサポートしています。

MITライセンスで、商用プロジェクトでも無料で利用できます。

ScrollBtweenの特徴

ScrollBtween

CSSの複数のプロパティを同時にトゥイーンさせたり、同じプロパティに複数のトゥイーンを設定できます。下記はショーケースの一つで、複数のプロパティが同時にトゥイーンしているのが分かると思います。

サイトのキャプチャ

Showcase: La Casa de Papel

ScrollBtweenのデモ

デモではScrollBtweenの挙動が分かるシンプルなアニメーションを楽しめます。

サイトのキャプチャ

Color
スクロール位置によって、背景のカラー(background-color)が変化します。グラデーションにも対応しています。

サイトのキャプチャ

Image reveal
画像のぼやけたバージョンを表示し、スクロールで元の画像を表示します。

サイトのキャプチャ

Page progress
最近のWebページで見かけますね、スクロール位置に基づくプログレスバー。

サイトのキャプチャ

Parallax
パララックスは視差効果を与えるもので、2つの画像を異なるタイミングで動かします。

サイトのキャプチャ

Star wars
スターウォーズのクレジットみたいなエフェクト。

サイトのキャプチャ

Text background clip
大量のテキストを背景画像でクリップします。

サイトのキャプチャ

Texts slides
テキストのスペーシングとスケールを変化させ、次々に表示します。

ScrollBtweenの使い方

Step 1: 外部ファイル

当スクリプトを</body>の直前に外部ファイルとして記述します。

オプションとして、アニメーションをよりスムーズにするola.jsを使用できます。

Step 2: アニメーションの設定

ScrollBtweenの構文は、CSS値にインラインで記述します。トゥイーンはいくつでも設定でき、同じプロパティに複数のトゥイーンを設定することもできます。基本書式は、下記の通りです。

デモにあった背景のカラーを変化させる場合は、下記のようになります。

テキストの配置を変更(left値)させる場合は、下記のようになります。

詳しくは、ドキュメントをご覧ください。

サイトのキャプチャ

Usage -ScrollBtween

sponsors

top of page

©2022 coliss