Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut
Post on:2018年9月27日
sponsors
スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。
スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。
ScrollOutの特徴
-
- 実装が簡単
- スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。
-
- 超軽量
- 1KBの超軽量ライブラリ。
-
- 依存は無し
- スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。
-
- ブラウザのサポート
- IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
-
- ライセンス
- MITライセンスで、個人でも商用でも無料で利用できます。
ScrollOutのデモ
デモでは、最近見かけるさまざまなスクロールエフェクトを楽しめます。
まずは、スクロールに合わせてコンテンツがアニメーションで表示されるエフェクトから。
See the Pen Scroll Triggered Elements (Splitting + ScrollOut) by Christopher Wallis (@notoriousb1t) on CodePen.
Apple Watch Series 4のページで採用されているスクロールエフェクトです。
See the Pen Apple Watch Scroll Border | @keyframers 1.20.0 by @keyframers (@keyframers) on CodePen.
水平スクロールにも対応しています。
See the Pen Horizontal Scrolling with Scroll Out by Christopher Wallis (@notoriousb1t) on CodePen.
最近ではLazyLoadを採用しているサイトも増えてきました。ScrollOutでLazyLoadにも対応できます。
See the Pen Lazy-Load images with ScrollOut by Christopher Wallis (@notoriousb1t) on CodePen.
ギャラリーなどにもこうしたスクロールエフェクトをよく見かけます。
See the Pen Scaling Gallery on Scroll by Christopher Wallis (@notoriousb1t) on CodePen.
Splitting.jsを併用すると、テキストに対して面白いエフェクトを与えることもできます。
See the Pen ScrollOut + Splitting.js by Shaw (@shshaw) on CodePen.
ScrollOutの使い方
Step 1: 外部ファイル
当スクリプトを外部ファイルとして記述します。
|
1 2 3 4 |
<head> ... <script src="scroll-out.min.js"></script> </head> |
CDNも用意されています。
|
1 2 3 4 |
<head> ... <script src="https://unpkg.com/scroll-out/dist/scroll-out.min.js"></script> </head> |
Step 2: JavaScript
まずは、基本書式。
|
1 2 3 4 5 6 7 8 9 10 |
<body> ... コンテンツ ... <script> ScrollOut({ /* options */ }); </script> </body> |
例えば、要素をフェードさせる場合は下記のように記述します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
<body> ... コンテンツ ... <script> ScrollOut({ onShown: function(el) { // use the web animation API el.animate([{ opacity: 0 }, { opacity: 1 }], 1000); }, onHidden: function(el) { // hide the element initially el.style.opacity = 0; } }); </script> </body> |
アニメーションの部分はAnimate.cssなど、好きなCSSライブラリを自由に使用することもできます。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<body> ... コンテンツ ... <script> ScrollOut({ onShown(el) { el.classList.add("animated"); } }); </script> </body> |
更に詳しい実装方法は、ドキュメントが用意されています。
sponsors
