Appleのようなスクロールに連動したエフェクトもこれなら簡単に実装できる1KBの超軽量スクリプト -ScrollOut

スクロールするとコンテンツをふわりと表示させたり、追従するように表示させたり、ビューポートに表示されてない画像をLazyLoadさせたり、そういえば今回のApple Watchでも面白いスクロールエフェクトが採用されていますね。

スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。

サイトのキャプチャ

ScrollOut
ScrollOut -GitHub


ScrollOutの特徴

デモのキャプチャ
  • 実装が簡単
    スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。
  • 超軽量
    1KBの超軽量ライブラリ。
  • 依存は無し
    スクリプトは単体で動作し、他スクリプトへの依存は一切ありません。
  • ブラウザのサポート
    IE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。
  • ライセンス
    MITライセンスで、個人でも商用でも無料で利用できます。

ScrollOutのデモ

デモでは、最近見かけるさまざまなスクロールエフェクトを楽しめます。
まずは、スクロールに合わせてコンテンツがアニメーションで表示されるエフェクトから。

Apple Watch Series 4のページで採用されているスクロールエフェクトです。

水平スクロールにも対応しています。

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: 外部ファイル

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

CDNも用意されています。

Step 2: JavaScript

まずは、基本書式。

例えば、要素をフェードさせる場合は下記のように記述します。

アニメーションの部分はAnimate.cssなど、好きなCSSライブラリを自由に使用することもできます。

更に詳しい実装方法は、ドキュメントが用意されています。

sponsors

top of page

©2024 coliss