
2013年くらいから、ポートフォリオサイトなどでよく見るようになった、背景画像を固定してスクロールさせる方法を紹介します。
言葉で説明するのが少し難しいのですが、画面をスクロールすると、画像が固定となって、あたかも下からニュキっと画像がスクロールするように見せるあれです。(トップの画像なような感じのやつです。)
言葉で説明しようとするとやはり難しいですね。
下の方にデモ画面がありますので、そちらから確認して下さい。
このページでやること
CSSで背景画像を固定してスクロールさせる方法を紹介します。
CSSで背景画像を固定するサンプルソース
jQueryは必要ありません。
CSSのみで実装可能です。
まずはCSSのサンプルソースを紹介します。
<style type="text/css"> <!-- .header1 { display: table; height: 800px; width: 100%; position: relative; background: url(./img/bg1.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } .header2 { display: table; height: 800px; width: 100%; position: relative; background: url(./img/bg2.jpg) no-repeat center center fixed; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover; } h1{ margin: 0 0 50px; padding: 50px; font-size: 200px; color: #ffffff; font-weight: bold; } //--> </style>
HTML部分のサンプルソースです。
<!-- HTML部分 --> <body bgcolor="#e2e2e2"> <div class="header1"> <h1>Page 1</h1> </div> <div class="header2"> <h1>Page 2</h1> </div>
デモ
さいごに
最近では本当よく見かけるようになったデザインです。わたしも好きなデザインの一つです。
なかなか言葉では表現しにくいですが、正式名称はあるのでしょうか。
名前はよくわからなくても、デザインはとてもくせになるよいデザインだと思います。
それでは!
この記事はお役に立てましたか?
お役に立てたことがあればシェアしていただけると嬉しいです!