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

<div class="js-parallax"></div>

1	<div class="js-parallax"></div>

css

.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;
	}
}

.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

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
             });
           }
         });
       }
     });
   });
 }();