Watchでも面白いスクロールエフェクトが採用されていますね。スクロールによる変化を検出し、それに合わせてCSSのさまざまなエフェクトを簡単に与えることができる1KBの超軽量JavaScriptライブラリを紹介します。非常にシンプルなので、他のJavaScriptやCSSアニメーションのライブラリと一緒に使用することも簡単です。実装が簡単スクロールの変化を検出し、CSSのさまざまなエフェクトを簡単に与えることができます。超軽量1KBの超軽量ライブラリ。依存は無しスクリプトは単体で動作し、他スクリプトへの依存は一切ありません。ブラウザのサポートIE11を含む、デスクトップ・スマホ用のすべてのブラウザをサポート。ライセンスMITライセンスで、個人でも商用でも無料で利用できます。ScrollOutのデモデモでは、最近見かけるさまざまなスクロールエフェクトを楽しめます。スクロールに合わせてコンテンツがアニメーションで表示されるエフェクトから。4のページで採用されているスクロールエフェクトです。CodePen.水平スクロールにも対応しています。CodePen.最近ではLazyLoadを採用しているサイトも増えてきました。ScrollOutでLazyLoadにも対応できます。CodePen.ギャラリーなどにもこうしたスクロールエフェクトをよく見かけます。CodePen.Splitting.jsを併用すると、テキストに対して面白いエフェクトを与えることもできます。外部ファイル当スクリプトを外部ファイルとして記述します。src="scroll-out.min.js"></script></head>CDNも用意されています。JavaScriptまずは、基本書式。*/});</script></body>例えば、要素をフェードさせる場合は下記のように記述します。0;}});</script></body>アニメーションの部分はAnimate.cssなど、好きなCSSライブラリを自由に使用することもできます。{el.classList.add("animated");}});</script></body>更に詳しい実装方法は、ドキュメントが用意されています。