JavaScriptを使わないシンプルなパララックスの作り方 [IE7対応]
動きのないシンプルなパララックスは、JavaScript無しで簡単に作ることが可能。
フルブラウザの1枚画像は見栄えがするため汎用性は高い。
検証済みブラウザとOS
- IE 7～ ※一部CSSはIE8以下不可
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 8
- Android 4.1
要点とコード
- 背景画像は横幅 2560px で用意する（これ以上のディスプレイサイズは一般的でない）
- body に margin: 0; を指定して余白を削除
- html と body に height: 100%; を指定
- 背景を中央配置するための、center は1つでOK（center center は不要）
- background の / で区切ったショートハンドは、IE8 と Android 4.1 で使えないため、background-size :cover; は普通に書く
- iPad を横向きにした 1024px 以下では、background-attachment: scroll; で背景固定を解除
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | <section id="block-01" class="block"> <h1>テキスト</h1> <p>テキスト</p> <!-- /#block-01 --></section> <div class="block-text"> <h1>テキスト</h1> <img src="//placeimg.com/640/480/animals" alt=""> <p>テキスト</p> <!-- /.block-text --></div> <div id="block-02" class="block"></div> <div class="block-text"> <h1>テキスト</h1> <img src="//placeimg.com/640/480/arch" alt=""> <p>テキスト</p> <!-- /.block-text --></div> <div id="block-03" class="block"></div> <div class="block-text"> <h1>テキスト</h1> <img src="//placeimg.com/640/480/nature" alt=""> <p>テキスト</p> <!-- /.block-text --></div> <div id="block-04" class="block"></div> <div class="block-text"> <h1>テキスト</h1> <img src="//placeimg.com/640/480/tech" alt=""> <p>テキスト</p> <!-- /.block-text --></div> <div id="block-05" class="block"></div> <footer> <h1>footer領域</h1> </footer> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 | body { margin: 0; } html, body { height: 100%; } #block-01 { background: url(../images/bg_01.jpg) center no-repeat fixed; background-size: cover; } #block-02 { background: url(../images/bg_02.jpg) center no-repeat fixed; background-size: cover; } #block-03 { background: url(../images/bg_03.jpg) center no-repeat fixed; background-size: cover; } #block-04 { background: url(../images/bg_04.jpg) center no-repeat fixed; background-size: cover; } #block-05 { background: url(../images/bg_05.jpg) center no-repeat fixed; background-size: cover; } // iPad横向きで背景固定を解除 #block-01, #block-02, #block-03, #block-04, #block-05 { @include max(1024) { background-attachment: scroll; } } .block { height: 100%; color: white; padding: 30px; } .block-text { padding: 30px; } footer { color: white; height: 100%; padding: 30px; background: #666; } |
Sass用のメディアクエリは下記記事を参考。
問題点
- IE8 以下で background-size :cover; が効かない
- 2016年1月にサポート終了なのでもういいっしょ。
posted with amazlet at 15.08.27
益子 貴寛 堀内 敬子 小林 信次 千貫 りこ 伊藤 学 山田 あかね 西畑 一馬
毎日コミュニケーションズ
売り上げランキング: 130,120
毎日コミュニケーションズ
売り上げランキング: 130,120
コメントを投稿する