JavaScriptやCSS3によってWebの表現力は向上しています。例えばスクロールによって表示が変化するパララックスエフェクトもその一つです。スクロールによってコンテンツが変化するのは見た目のインパクトも強いです。 今回はスクロールによって色彩を変化させるscrollToClipを紹介します。

scrollToClipの使い方

最初の表示です。

スクロール途中。下半分だけ反転しています。

スクロールしきると色が反転しています。

scrollToClipでは二つの画像を指定しますが、この場合は同じ画像に対して色彩を反転させるスタイル設定を行っています。ある領域から別な領域に入り込んだ時の変化を見た目にも分かりやすく伝えることができるでしょう。

scrollToClipはJavaScript製のオープンソース・ソフトウェア(MIT License)です。

デモ bersLucas/scrollToClip: A function to clip two elements on scroll to give a reveal effect