Parallax:パパラックス効果画面の構成を変えたい

Question

ネット独学でウェブショップを自身で制作し運営しています。

素人のＨＰ制作者です。もし不適切であれば当質問は即効削除し退会します。

私は今回レスポンシブデザインでのリニューアルを考えて現在は雛形を制作中です。

会社概要などを見せるページにParallax:パパラックス効果を入れたいと思っています。

ネットを参考にして試作ページを制作しました。

一応参考にしたページ通りにレスポンシブデザインＰＣ，ＳＰ共に効果が出ました。

https://www.aquadress.club/aa.html

ただこのパパラックス効果を改良して、

ページトップから順に、画像1、白場面2、画像3、白場面4、画像5、白場面6、画像7と並べて最後にフッター。

このように改良がしたいのです。

自分で色々と作業しますが、素人なので出来ません。

このような改良ができる方法をお聞かせ頂きたいのです。

どうかよろしくお願いいたします。

ここに質問の内容を詳しく書いてください。
（例）PHP(CakePHP)で●●なシステムを作っています。
■■な機能を実装中に以下のエラーメッセージが発生しました。

発生している問題・エラーメッセージ

エラーメッセージ

コード

該当のソースコード

ソースコード

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ここにより詳細な情報を記載してください。

Answer 1

返信では見にくいのでこちらで回答を書きます。
javaScriptが動いてなかったのは、最後の beforeBg = 'bgA; の記述で終わりの'が抜けてたからです。

これは私の方のミスではあるので申し訳なく思いますが、chromeの開発者ツールや各種エディタ等使えばsyntaxErrorを見抜けるので、まずはコードをチェックする癖をつけた方が良いかと思います。
また、流石に商用とするようなページにwebで貰ったコードをノーチェックで張り付けるのは危険すぎます。
書いたコードの中にある「$('.section1').removeClass('bg〇'); // ココを正規表現に置き換える」のようにremoveClassがどのような処理をするのかを理解していれば、クラス名の指定が適当だからまず自分で変更する必要があるというのも分かるはずです。

サンプルを貰えるのはこのサイトの強みなのでいいですが、貰ったコードはまず検証し、理解してから実装しなければバグの温床となりますし、メンテナンスも出来なくなりますので、コードを理解する努力はしましょう。

以下にコピペでも動く想定の修正版コードを載せますが、同じような処理をしているところの関数化など冗長的なコードの最適化等、改良はまだまだ出来ます。
ここで載せるコードはあくまでも、現時点での暫定対応とし、最適な手法については適宜改良が必要だという認識を持っていてください。

<script>
var beforeBg = '';
$(window).on('load scroll touchmove', function() {
    $scrollTop = $(window).scrollTop();
    // 画像を切り替える位置 = セクション要素の画面上位置
    $changePoint1 = $('.section1').offset().top;
    $changePoint2 = $('.section3').offset().top;
    $changePoint3 = $('.section5').offset().top;
    $changePoint4 = $('.section7').offset().top;
    
    // 以下の判定処理群で各要素の位置を超えたか判定し、画像の切り替えを行う
    if($scrollTop < $changePoint7){
        // 同じ背景画像への切替を行わないように判定
        if(beforeBg !== 'bgD'){
            // 新しい画像へ切替
            $('.section1').removeClass('bgA');
            $('.section1').removeClass('bgB');
            $('.section1').removeClass('bgC');
            $('.section1').addClass('bgD');
            beforeBg = 'bgD';
            
        }
    } else if($scrollTop < $changePoint5){
        if(beforeBg !== 'bgC'){
            $('.section1').removeClass('bgA');
            $('.section1').removeClass('bgB');
            $('.section1').removeClass('bgD');
            $('.section1').addClass('bgC');
            beforeBg = 'bgC';
        }
    } else if($scrollTop < $changePoint3){
        if(beforeBg !== 'bgB'){
            $('.section1').removeClass('bgA');
            $('.section1').removeClass('bgC');
            $('.section1').removeClass('bgD');
            $('.section1').addClass('bgB');
            beforeBg = 'bgB';
        }
    } else if($scrollTop < $changePoint1){
        if(beforeBg !== 'bgA'){
            $('.section1').removeClass('bgB');
            $('.section1').removeClass('bgC');
            $('.section1').removeClass('bgD');
            $('.section1').addClass('bgA');
            beforeBg = 'bgA';
        }
    }
});
</script>

Comments

[riders_jewelry]

おはようございます。

おっしゃる事すべて理解いたします。

今回頂戴したscriptを差し込んで試してみます。

色々とアドバイスを有難うございました。

感謝です。

Answer 2

HTMLの中で直接CSSの指定をしているようなので、手っ取り早くするなら、そこを以下のコードの様に変更してみて下さい。
ポイントとしては現在の奇数セクションと偶数セクションのCSS指定の反転ですかね。
スマホの背景画像の変更はJSを使ってクラスの切り替えをしているようなので、そこに関してはJSの変更・修正が必要でしょうね。

ちなみにですが、cssでsection5,section6,section7を入れているので、body内で他のセクションと同様に

<div class="section5 section"> 表示内容 </div> のような要素の追加は必要です。

<!--
  .section {
   height: 100vh;
   padding: 10% 0;
   text-align: center;
  
}

  .section2 , .section4 ,section6 {
    background: #fff;
  
}

  @media screen and (min-width: 737px) {
    /* PCの場合の背景画像 */
    .section1 {
     background: url("https://www.aquadress.club/zzz-img/12.jpg") no-repeat fixed center center /cover;
    }
    .section3 {
     background: url("https://www.aquadress.club/zzz-img/03.jpg") no-repeat fixed center center /cover;
    }
    .section5 {
     background: url("https://www.aquadress.club/zzz-img/画像") no-repeat fixed center center /cover;
    }
    .section7 {
     background: url("https://www.aquadress.club/zzz-img/画像") no-repeat fixed center center /cover;
    }
  }
  @media screen and (max-width: 736px) {
    /* スマホの場合の背景画像 */
    .section1:before{
     background-position: center center;
     background-repeat: no-repeat;
     background-size: cover;
     position: fixed;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
     content: "";
     z-index: -1;
    }
    /* スマホの場合は同じ要素の背景画像を変更する */
    .section1.bgA:before{
     background-image: url("https://www.aquadress.club/zzz-img/12b.jpg");
    }

    .section1.bgB:before{
     background-image: url("https://www.aquadress.club/zzz-img/03b.jpg");
    }

    .section1.bgC:before{
     background-image: url("https://www.aquadress.club/zzz-img/画像");
    }

    .section1.bgD:before{
     background-image: url("https://www.aquadress.club/zzz-img/画像");
    }
  }
-->

Comments

[riders_jewelry]

早速のアドバイスをありがとうございます。

パソコンサイズでは完璧にパララックス効果が現れます。
https://www.aquadress.club/ccc.html

ただ、タブレットサイズ、スマホからは全面が真っ白で画像表示されません。

スマホはアンドロイド３機で確かめました。

きっともう少しなのでしょうね。

responsiveとかのタグが必要なのでしょうか？

[mikan_s4n]

スマホからに関しては以下の指定がある通り、736px以下の幅を持つものはそうなってしまいますね。
@media screen and (max-width: 736px)

既存jsコード拝見しましたが、既存のままではbgA、bgBの画像の切り替えしかできませんね……。
以下の様に変更すればいいかもですが、わりと強引なコードですのでスマートではないです…。
removeClassで既に付いているbgなんちゃらを削っているので、そこは正規表現等を使って、消すようにすればいいですね。
試してはないので、正常に動作する保証はないですが、大筋は間違ってはいないと思うので、微調整すればいけると思います。

大雑把に説明するとsection〇までスクロールされれば、section1の背景画像を切り替えるという処理です。
<script>
var beforeBg = '';
$(window).on('load scroll touchmove', function() {
$scrollTop = $(window).scrollTop();
// 画像を切り替える位置
$changePoint1 = $('.section1').offset().top;
$changePoint2 = $('.section3').offset().top;
$changePoint3 = $('.section5').offset().top;
$changePoint4 = $('.section7').offset().top;
if($scrollTop < $changePoint7){
// 同じ背景画像への切替を行わないように判定
if(beforeBg !== 'bgD'){
// 新しい画像へ切替
$('.section1').removeClass('bg〇'); // ココを正規表現に置き換える
$('.section1').addClass('bgD');
beforeBg = 'bgD';
}
} else if($scrollTop < $changePoint5){
if(beforeBg !== 'bgC'){
$('.section1').removeClass('bg〇'); // ココを正規表現に置き換える
$('.section1').addClass('bgC');
beforeBg = 'bgC';
}
} else if($scrollTop < $changePoint3){
if(beforeBg !== 'bgB'){
$('.section1').removeClass('bg〇'); // ココを正規表現に置き換える
$('.section1').addClass('bgB');
beforeBg = 'bgB';
}
} else if($scrollTop < $changePoint1){
if(beforeBg !== 'bgA'){
$('.section1').removeClass('bg〇'); // ココを正規表現に置き換える
$('.section1').addClass('bgA');
beforeBg = 'bgA;
}
}
});
</script>

[riders_jewelry]

おはようございます。アドバイスに感謝です。

早速試してみました。

https://www.aquadress.club/bbb.html

しかし、どうもスマホでは上手く行きません。
私のやり方がまずいのかも知れません。
単純にコピー＆ペーストでscriptを入れ替えたのですが、、、