[CSS]背景を固定させて、カーテンのようにスクロールさせるテクニック

去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。

まずは、スタイルシートのみ版から。

サイトのキャプチャ

Fixed image backgrounds

スクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。
背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。

サイトのキャプチャ

Fixed image backgroundsをスクロール

実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。

Demo 1のHTML

HTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。

Demo 1のCSS

box-sizingをborder-boxにし、headerをposition:fixed、各sectionの背景をfixedにします。

上記のデモにインスパイアされた、スクリプト併用のもう一つのデモも紹介します。

サイトのキャプチャ

Slideshow

こちらはスライドショーとしての機能が追加されており、スクロールだけでなく、キーボードの左右の矢印キーでも操作が可能です。

サイトのキャプチャ

Slideshowをスクロール

背景の写真画像は、ウインドウの表示に合わせて拡大縮小されます。

Demo 2のHTML

こちらはスライドショーが前提なので、背景画像としてdiv要素に配置しています。

Demo 2のCSS

画像を固定させるのは同じですが、HTMLの方に画像を指定しているためシンプルです。

Demo 2のJavaScript

スクリプトで背景画像やスクロールを制御します。

sponsors

top of page

©2020 coliss