[CSS]半透明のパネルが奥に吸い込まれる!一味違った縦長スクロールを実装するスタイルシートのテクニック

コンテンツを半透明のパネルに配置し、スクロールすると、パネルが奥に吸い込まれていくのを実装するスタイルシートを紹介します。

HTMLはシンプルで、JavaScriptは不要です。

デモのアニメーション

実際の動作は、下記でお楽しみください。
スペースが小さいので、デモページを開いて見た方が快適です。

Pure CSS z-axis scrolling

※上部の「Debug」ボタンをクリックすると、どのような仕組みになっているか分かると思います。

実装

HTML

各パネルをdiv要素で実装し、それらを内包するラッパーを用意します。

CSS

パネルを3Dの軸に沿って変形させ、正位置に戻して、スクロールさせます。
「Debug」ボタンのクリックでこの仕組みが可視化されます。

sponsors

top of page

©2018 coliss