iPhone（ios）対応！background-attachment: fixed;の代用で背景画像にパララックス効果を適用する方法 – jQuery
2018年5月13日
メインビジュアルにbackground-attachment: fixed;で背景画像を固定しパララックス効果を実装することがあるかと思いますが、iPhone（ios）だとバグがおきて思うように動かないということがありました。
その問題を解決すべく、PC時はこれまで通りbackground-attachment: fixed;を使い、スマホ時にはjQueryで代用するサンプルを作ってみました。
完全再現ではない（スマホ時の背景移動範囲に制限）ですが、このサンプルだとiPhone（ios）でも問題なくパララックス効果を実装できるので、もしよければお使いください。
background-attachment: fixed;の代用パララックス効果のデモ
https://hiroyayabiku.github.io/background-attachment-substitution/
スポンサードサーチ
background-attachment: fixed;の代用パララックス効果をダウンロード
https://github.com/HiroyaYabiku/background-attachment-substitution
html
|
1 |
<div class="js-parallax"></div> |
スポンサードサーチ
css
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
.js-parallax { width: 100%; height: 300px; margin: 0 auto 1500px; background: url(./img/img01.jpg) no-repeat center top; text-align: center; background-attachment: fixed; } @media screen and (max-width: 750px) { .js-parallax { background-size: cover; background-attachment: scroll; } } |
JQuery
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
var parallaxBkImg = function(){ $(window).on('load resize', function() { $(window).on('load scroll', function(){ var $winTop = $(window).scrollTop(); var $target = $('.js-parallax'); var $winWidth = $(window).width(); if($winWidth < 750) { $target.each(function(index){ var $position = $winTop - $target.eq(index).offset().top; if($winTop > $target.eq(index).offset().top - 800) { $target.eq(index).css({ 'background-position-y': $position * .4 }); } }); } }); }); }(); |
関連記事
2017年11月1日 【jQuery】スマホ時にトップへ戻るボタンの表示非表示が一瞬チラつく場合の対処法
2019年1月27日 コピペでOK！ jQueryで上下連動タブの切り替えをする方法- 2019年1月27日 【jQuery】要素にランダムかつ重複なしにクラスを付与する方法
2017年11月11日 【jQuery】スライドショーとポップアップ（モーダル）を両方使用し、作成したサンプル
2016年8月12日 【jQueryプラグイン】スクロールバーの太さ、色などをカスタマイズできるプラグイン ※mCustomScrollbar
