[JS]スマホにも対応！ページをスクロールした際、要素をアニメーションで表示する軽量スクリプト -t-scroll
Post on:2017年6月5日
sponsors
スマホやタブレットに対応、もちろんデスクトップにも対応、ページをスクロールした際に、要素にさまざまなアニメーションを簡単に適用できる単体で動作する軽量(4KB)のスクリプトを紹介します。
jQueryなど、他のスクリプトやスタイルシートは一切不要です。
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の快適なスクロールのアニメーションを楽します。
デフォルトの設定で、スクロールして要素が表示されると、zoomOutのアニメーションで表示されます。
スクロールすると、要素が次々にzoomOutで表示されます。
スクロールすると、非表示だった要素が次々にアニメーションで表示されます。
スクロールすると、要素が指定したポジションにアニメーションで表示されます。
スクロールすると、指定した間隔で要素がアニメーションで表示されます。
スクロールすると、指定したタイミングで要素がアニメーションで表示されます。
スクロールすると、要素が無限アニメーションで表示されます。
すべての要素に異なる機能を割り当てて、アニメーションで表示されます。
t-scrollの使い方
Step 1: 外部ファイル
当スクリプトとスタイルシートを外部ファイルとして記述します。
|
1 2 3 4 5 6 7 8 9 10 |
<head> ... <link type="text/css" rel="stylesheet" href="t-scroll.min.css"> </head> <body> ... コンテンツ ... <script type="text/javascript" src="t-scroll.min.js"></script> </body> |
Step 2: HTML
要素には表示する際のアニメーションをclassで指定します。
|
1 2 |
<div class="zoomIn">"..."</div> <div class="zoomIn">"..."</div> |
setTimeoutが必要な場合は、t_showに値を指定します。
|
1 2 |
<div class="zoomIn" t_show="1">"..."</div> <div class="zoomIn" t_show="2">"..."</div> |
最初のスクリーンでt_showを実行したい場合は、t_animatedを加えます。
|
1 2 3 4 |
<div class="box-center"> <div class="zoomIn t_animated" t_show="1"> ... </div> <div class="zoomIn t_animated" t_show="2"> ... </div> </div> |
Step 3: JavaScript
要素を指定し、スクリプトを実行します。
|
1 2 3 4 5 |
<script type="text/javascript"> Tu.t_scroll({ 't_element': '.zoomIn' }) </script> |
オプションではさまざまなアニメーションが用意されており、下記ページで試すことができます。
sponsors
