on:2013年5月16日sponsors去年くらいからよく見かけるようになったスクロールすると、カーテンを持ち上げるように次々にコンテンツが表示されるテクニックをスタイルシートのみ版とスクリプト併用パワーアップ版の二つを紹介します。スタイルシートのみ版から。backgroundsスクロールするとヘッダは固定表示で、画像を配置した背景がカーテンを持ち上げるように次のコンテンツが表示されます。背景は写真も面白いですが、ソリッドなカラーでも面白い効果が得られますね。backgroundsをスクロール実装はシンプルです、ポートフォリオなどでよく見かけるテクニックです。1のHTMLHTMLの基本構造は、header要素があり、各スライドはsection要素です。section内には見出しやテキストや画像などを自由に配置できます。1のCSSbox-sizingをborder-boxにし、headerをposition:fixed、各sectionの背景をfixedにします。repeat;}上記のデモにインスパイアされた、スクリプト併用のもう一つのデモも紹介します。Slideshowこちらはスライドショーとしての機能が追加されており、スクロールだけでなく、キーボードの左右の矢印キーでも操作が可能です。Slideshowをスクロール背景の写真画像は、ウインドウの表示に合わせて拡大縮小されます。2のHTMLこちらはスライドショーが前提なので、背景画像としてdiv要素に配置しています。2のCSS画像を固定させるのは同じですが、HTMLの方に画像を指定しているためシンプルです。2のJavaScriptスクリプトで背景画像やスクロールを制御します。Posts関連記事が見つかりませんでした。