[JS]スマホにも対応!ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll

スマホやタブレットに対応、もちろんデスクトップにも対応、ページをスクロールした際に、要素にさまざまなアニメーションを簡単に適用できる単体で動作する軽量(4KB)のスクリプトを紹介します。
jQueryなど、他のスクリプトやスタイルシートは一切不要です。

サイトのキャプチャ

t-scroll
t-scroll -GitHub

t-scrollの特徴

サイトのキャプチャ
カスタマイズ性
45種類の豊富なオプションが用意されており、初心者にも簡単、上級者には強力。
jQueryは無し
ECMAScript6で実装された単体のライブラリ。
SASS/CSS3
Sassも揃っており、コンパイルされたCSSですぐに使い始めることができます。
Gulp
Gulpによって構築されています。
サポートブラウザ
クロスブラウザ対応(IE10+, Firefox, Safari, Opera, Chromeなど)
npm
node.jsで簡単にt-scrollを設定可能。

t-scrollのデモ

デモは豊富に用意されており、t-scrollの快適なスクロールのアニメーションを楽します。

デモのキャプチャ

デモページ

デモのキャプチャ

Demo: default

デフォルトの設定で、スクロールして要素が表示されると、zoomOutのアニメーションで表示されます。

デモのキャプチャ

Demo: animate

スクロールすると、要素が次々にzoomOutで表示されます。

デモのキャプチャ

Demo: show

スクロールすると、非表示だった要素が次々にアニメーションで表示されます。

デモのキャプチャ

Demo: position

スクロールすると、要素が指定したポジションにアニメーションで表示されます。

デモのキャプチャ

Demo: duration

スクロールすると、指定した間隔で要素がアニメーションで表示されます。

デモのキャプチャ

Demo: delay

スクロールすると、指定したタイミングで要素がアニメーションで表示されます。

デモのキャプチャ

Demo: infinite

スクロールすると、要素が無限アニメーションで表示されます。

デモのキャプチャ

Demo: function

すべての要素に異なる機能を割り当てて、アニメーションで表示されます。

t-scrollの使い方

Step 1: 外部ファイル

当スクリプトとスタイルシートを外部ファイルとして記述します。

Step 2: HTML

要素には表示する際のアニメーションをclassで指定します。

setTimeoutが必要な場合は、t_showに値を指定します。

最初のスクリーンでt_showを実行したい場合は、t_animatedを加えます。

Step 3: JavaScript

要素を指定し、スクリプトを実行します。

オプションではさまざまなアニメーションが用意されており、下記ページで試すことができます。

デモのキャプチャ

t-scroll: options

top of page

©2018 coliss