1枚背景画像サイトで使えるかもしれないパララックスサンプル2つ [一部IE8未対応]
サンプルの汎用性が低いので実務で使えるかは微妙。
ただ「こういうことが出来ます」と提案できるため、覚えておいて損はないはず。
検証済みブラウザとOS
- IE 7~ ※2つめのサンプルはIE9以上
- Firefox
- Google Chrome
- Safari
- Windows 7
- OS X Yosemite
- iOS 8
- Android 4.1 / 5
画像1枚をbodyに固定、ブロックごとに背景有ったり無かったり
- JavaScript無し
- body に背景画像を fixed 指定
- 各ブロックには背景画像を fixed 指定するか、背景画像を無しにしているかだけ
- ブロック要素は min-height 指定でコンテンツ量を可変に
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 | <section id="keyvisual"> テキスト <!-- /#keyvisual --></section> <section id="block-01"> テキスト <!-- /#block-01 --></section> <section id="block-02"> テキスト <!-- /#block-02 --></section> <section id="block-03"> テキスト <!-- /#block-03 --></section> <section id="block-04"> テキスト <!-- /#block-04 --></section> <section id="block-05"> テキスト <!-- /#block-05 --></section> <footer> テキスト </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 | body { background: url(../images/bg_body.jpg) center no-repeat fixed; background-size: cover; } // 各ブロック共通 section { min-height: 50%; padding: 5% 30px 0; } #keyvisual { min-height: 100%; padding: 10% 0 0; } #block-01 { background: url(../images/bg_01.jpg) center no-repeat fixed; background-size: cover; } #block-03 { background: url(../images/bg_02.jpg) center no-repeat fixed; background-size: cover; } #block-05 { background: url(../images/bg_03.jpg) center no-repeat fixed; background-size: cover; } // iPad横向きで固定背景解除 body, #block-01, #block-03, #block-05 { @include max(1024) { background-attachment: scroll; } } footer { min-height: 100%; padding: 5% 30px 0; @include max(1024) { background: url(../images/bg_body.jpg) center no-repeat scroll; background-size: cover; } } |
Sass用のメディアクエリはこちらを参考。
各ブロックの背景を動かす
- PCブラウザのみで使用
- IE 11などはカクカクして微妙
HTML
背景を動かすブロックに class=”block” を追加(jQueryで操作)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | <section id="keyvisual" class="block"> テキスト </section> <section id="block-01" class="block"> テキスト <!-- /#block-01 --></section> <section id="block-02" class="block"> テキスト <!-- /#block-02 --></section> <section id="block-03" class="block"> テキスト <!-- /#block-03 --></section> <section id="block-04"> テキスト <!-- /#block-04 --></section> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script> <script src="js/parallax.js"></script> |
SCSS
- 背景を fixed で固定
- background-position: center top; とするのがポイント
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 | section { min-height: 100%; padding: 10% 30px 0; } #keyvisual { padding: 10% 0 0; background: url(../images/keyvisual.jpg) center top no-repeat fixed; background-size: cover; } #block-01 { background: url(../images/bg_01.jpg) center top no-repeat fixed; background-size: cover; } #block-02 { background: url(../images/bg_02.jpg) center top no-repeat fixed; background-size: cover; } #block-03 { background: url(../images/bg_03.jpg) center top no-repeat fixed; background-size: cover; } #block-04 { padding-bottom: 0; background: url(../images/bg_04.jpg) center no-repeat fixed; background-size: cover; } // iPad横向きで背景固定解除 #keyvisual, #block-01, #block-02, #block-03, #block-04 { @include max(1024) { background-attachment: scroll; } } |
jQuery
- Android/iOS では背景の高さが足りなくなるので、ユーザーエージェント切り替えでJavaScript無し
- .each() メソッドで各ブロックごとに処理
- 24行目の数字で背景を動かすピクセル数を調整する
- ピクセル数が大きすぎると背景の高さが足りず、小さすぎると動いているように見えない
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 | $(function() { // ユーザーエージェント var ua = navigator.userAgent.toLowerCase(), android = ua.indexOf("android") >= 0, iphone = ua.indexOf("iphone") >= 0, ipad = ua.indexOf("ipad") >= 0, ipod = ua.indexOf("ipod") >= 0; // ブロックとブラウザ var block = $(".block"), Window = $(window); if (android || iphone || ipad || ipod) {} else { block.each(function() { var isBlock = $(this), // 各ブロック posY = isBlock.offset(); // 各ブロックからの座標 Window.scroll(function() { // 上下スクロールで上下方向に動かす // ウィンドウトップ + ウィンドウの高さ > ブロックからのウィンドウトップ and ウィンドウトップ < ブロックからのウィンドウトップ + ブロックの高さ if ( (Window.scrollTop() + Window.height()) > posY.top && (Window.scrollTop() < (posY.top + isBlock.height())) ) { var y = -((Window.scrollTop() - posY.top) / 11), // 背景を動かす num = "50%" + y + "px"; isBlock.css("backgroundPosition", num); } }); }); } }); |
コメントを投稿する