前提・実現したいこと
現在、レスポンシブサイトを構築しております。
その中でパララックスを用いて、複数枚の背景画像を切り替えたいのですが、
うまくいきません。。
スマホでは「background-attachment」がきかないことは
わかっていたので、こちらのウェブサイト(http://yarunaramaeni.com/sumaho_parallax/)を参考に
コードを触ってみたのですが、リンク先のサンプルのように
背景画像を2枚切り替えることはうまくいったのですが、
5枚はうまく切り替わりませんでした。。
デモに現状をアップしております。
スマホサイズでご確認いただけますと幸いです。。
https://toiletoiro.com/parallax/
javascriptもjQueryも初心者で困り果てています。。
どうかご教授のほど、よろしくお願いいたします、、!
発生している問題・エラーメッセージ
・スマホサイズでの挙動について、 茶色→オレンジ→水色→みどりの順番で表示されるようしたいのですが、 現状では、リロードした際に何故か水色が一番最初に表示されてしまいます。。
該当のソースコード
var beforeBg01 = ''; $(window).on('load scroll touchmove', function() { $scrollTop = $(window).scrollTop(); // 画像を切り替える位置 $changePoint01 = $('.section3').offset().top; if($scrollTop < $changePoint01){ // 同じ背景画像への切替を行わないように判定 if(beforeBg01 !== 'bgA'){ // 新しい画像へ切替 $('.section2').removeClass('bgB zindex'); $('.section4').removeClass('bgC zindex'); $('.section4').removeClass('bgD zindex'); $('.section6').removeClass('bgE zindex'); $('.section6').removeClass('bgF zindex'); $('.section2').addClass('bgA zindex'); beforeBg01 = 'bgA'; } } else { if(beforeBg01 !== 'bgB'){ $('.section2').removeClass('bgA zindex'); $('.section4').removeClass('bgC zindex'); $('.section4').removeClass('bgD zindex'); $('.section6').removeClass('bgE zindex'); $('.section6').removeClass('bgF zindex'); $('.section2').addClass('bgB zindex'); beforeBg01 = 'bgB'; } } }); var beforeBg02 = ''; $(window).on('scroll touchmove', function() { $scrollTop = $(window).scrollTop(); // 画像を切り替える位置 $changePoint02 = $('.section5').offset().top; if($scrollTop < $changePoint02){ // 同じ背景画像への切替を行わないように判定 if(beforeBg02 !== 'bgC'){ // 新しい画像へ切替 $('.section2').removeClass('bgA zindex'); $('.section2').removeClass('bgB zindex'); $('.section4').removeClass('bgD zindex'); $('.section6').removeClass('bgE zindex'); $('.section6').removeClass('bgF zindex'); $('.section4').addClass('bgC zindex'); beforeBg02 = 'bgC'; } } else { if(beforeBg02 !== 'bgD'){ $('.section2').removeClass('bgA zindex'); $('.section2').removeClass('bgB zindex'); $('.section4').removeClass('bgC zindex'); $('.section6').removeClass('bgE zindex'); $('.section6').removeClass('bgF zindex'); $('.section4').addClass('bgD zindex'); beforeBg02 = 'bgD'; } } }); var beforeBg03 = ''; $(window).on('scroll touchmove', function() { $scrollTop = $(window).scrollTop(); // 画像を切り替える位置 $changePoint03 = $('.section7').offset().top; if($scrollTop < $changePoint03){ // 同じ背景画像への切替を行わないように判定 if(beforeBg03 !== 'bgE'){ // 新しい画像へ切替 $('.section2').removeClass('bgA zindex'); $('.section2').removeClass('bgB zindex'); $('.section4').removeClass('bgC zindex'); $('.section4').removeClass('bgD zindex'); $('.section6').removeClass('bgF zindex'); $('.section6').addClass('bgE zindex'); beforeBg03 = 'bgE'; } } else { if(beforeBg03 !== 'bgF'){ $('.section2').removeClass('bgA zindex'); $('.section2').removeClass('bgB zindex'); $('.section4').removeClass('bgC zindex'); $('.section4').removeClass('bgD zindex'); $('.section6').removeClass('bgE zindex'); $('.section6').addClass('bgF zindex'); beforeBg03 = 'bgF'; } } });
試したこと
ここに問題に対して試したことを記載してください。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
あなたの回答
tips
プレビュー