質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.91%

スクロール量に応じて背景を拡大したい

解決済

回答 2

投稿

  • 評価
  • クリップ 1
  • VIEW 194

kii.32

score 39

前提・実現したいこと

固定した背景画像がスクロールで切り替わり、
さらにスクロール量に応じて徐々に拡大されていくページを作りたいです。

イメージとしては
地図を徐々に拡大していくような感じです。
(上にスクロールすると徐々に縮小する)

1枚目:宇宙から地球をみた風景
2枚目:雲の上から日本大陸をみた風景
3枚目:空から東京を見た風景
4枚目:東京タワーを上から見た風景
・・・

このようにスクロールに応じて、徐々にズームしていくようなページを作りたいのですが、
「固定した背景画像がスクロールで切り替え」までは実装できたのですが、
(下記サイトを参考にしました)
固定した背景画像がスクロールで切り替わる実装サンプル

「スクロール量に応じて徐々に拡大されていく」という部分の実装がうまくできず困っております。

該当のソースコード

<div class="m-main-content">
    <section>
        <div class="one bg01">
            <div class="bg _01" id="bg01"></div>
        </div>
    </section>
    <section>
        <div class="one bg02">
            <div class="bg _02" id="bg02"></div>
        </div>
    </section>
    <section>
        <div class="one">
            <div class="bg _03" id="bg03"></div>
        </div>
    </section>
    <section>
        <div class="one">
            <div class="bg _04" id="bg04"></div>

        </div>
    </section>
    <section>
        <div class="one">
            <div class="bg _05" id="bg05"></div>
        </div>
    </section>
</div>
section {
    display: flex;
}
.one {
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    padding: 20px;
    height: 200vh;
}
.bg {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    opacity: 0;
    transition: all 0.5s ease 0s;
    z-index: -1;
}
.show .bg {
    opacity: 1;
}
.bg._01 {
    background-image: url(../img/index/scene01.png);
}
.bg._02 {
    background-image: url(../img/index/scene02.png);
}
.bg._03 {
    background-image: url(../img/index/scene03.png);
}
.bg._04 {
    background-image: url(../img/index/scene04.png);
}
.bg._05 {
    background-image: url(../img/index/scene05.png);
}
// スクロール量で背景変更
$(function () {
  $(".one").each(function (i, elem) {
    var one = $(elem).offset().top;
    $(window).on("load scroll resize", function () {
      var two = $(window).height();
      var three = $(window).scrollTop();
      var showClass = "show";
      var timing = 300; // 300px, add to css
      if (three >= one - two + timing) {
        $(elem).addClass(showClass);
      } else {
        $(elem).removeClass(showClass);
      }
    });
  });
});

試したこと

transform: scale()を使えば良いかと思い
下記コードを試しましたが、『スクロール量に応じて』という部分ができず、
セクションに入ったらすぐ拡大をしてしまうので、他の方法を探しております。。。

.bg {
    transform: scale(0);
}
.show .bg {
    transform: scale(2);
}

1日調べていたのですが、どうしても答えがわからずこちらで質問をさせていただきました。
有識者の方がいらっしゃいましたら、ご教授いただけますと大変嬉しいです。

お手数ですが、どうぞよろしくお願い致します。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

+1

追記
画像1枚でもそれっぽいことも出来ます。
あとこの場合、sectionタグは使わないほうが無難だと思います。
https://developer.mozilla.org/ja/docs/Web/HTML/Element/section

.bg {
    background-image: url(https://i.imgur.com/EoMSvRb.png);
}

.bg._01 {
    transform: scale(0.2);
}

.bg._02 {
    transform: scale(0.4);
}
.bg._03 {
     transform: scale(0.6);
}
.bg._04 {
     transform: scale(0.8);
}
.bg._05 {
      transform: scale(1);
}

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2020/07/23 10:04

    ありがとうございます!お教えいただいた内容で解決いたしました!大変感謝いたします。

    キャンセル

0

恐らくこういうことかと思ったので作成してみました。
jqueryは使わず素のJavascriptで作成しています。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="UTF-8">
  <title>homePage</title>
  <style>
    body {
      height: 1260vh;
      margin: 0;
      overflow-x: hidden;
    }

    .modal {
      position: fixed;
      width: 750px;
      height: 550px;
      background-size: cover;
      background-repeat: no-repeat;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
    }


    .img01 {
      background-image: url(https://i.imgur.com/qSoaaZO.png);
    }

    .img02 {
      background-image: url(https://i.imgur.com/Nk2tKwJ.png);
    }

    .img03 {
      background-image: url(https://i.imgur.com/aCVYF4E.png);
    }

    .img04 {
      background-image: url(https://i.imgur.com/xRUM9Ks.png);
    }

    .img05 {
      background-image: url(https://i.imgur.com/YOaPhVn.png);
    }

    .img06 {
      background-image: url(https://i.imgur.com/QxowjS1.png);
    }

    .img07 {
      background-image: url(https://i.imgur.com/H1emWG2.png);
    }

    .img08 {
      background-image: url(https://i.imgur.com/KW9UKEs.png);
    }

    .img09 {
      background-image: url(https://i.imgur.com/RWOW2mH.png);
    }

    .img10 {
      background-image: url(https://i.imgur.com/iINBKTN.png);
    }

    .img11 {
      background-image: url(https://i.imgur.com/OoyrBBj.png);
    }

    .img12 {
      background-image: url(https://i.imgur.com/tzs1eN0.png);
    }

    .img13 {
      background-image: url(https://i.imgur.com/dL8sBXh.png);
    }

    .img14 {
      background-image: url(https://i.imgur.com/cQOK4YU.png);
    }

    .img15 {
      background-image: url(https://i.imgur.com/r7dmIDg.png);
    }

    .img16 {
      background-image: url(https://i.imgur.com/RUNZPSB.png);
    }

    .img17 {
      background-image: url(https://i.imgur.com/aImBIuQ.png);
    }

    .img18 {
      background-image: url(https://i.imgur.com/0EjKesH.png);
    }

    .img19 {
      background-image: url(https://i.imgur.com/8qDVEmn.png);
    }

    .img20 {
      background-image: url(https://i.imgur.com/EoMSvRb.png);
    }

    .bg {
      width: 100vw;
      height: 60vh;
    }

    .displayNone {
      display: none;
    }
  </style>
</head>

<body>
  <div class="img01 modal"></div>
  <div class="img02 modal displayNone"></div>
  <div class="img03 modal displayNone"></div>
  <div class="img04 modal displayNone"></div>
  <div class="img05 modal displayNone"></div>
  <div class="img06 modal displayNone"></div>
  <div class="img07 modal displayNone"></div>
  <div class="img08 modal displayNone"></div>
  <div class="img09 modal displayNone"></div>
  <div class="img10 modal displayNone"></div>
  <div class="img11 modal displayNone"></div>
  <div class="img12 modal displayNone"></div>
  <div class="img13 modal displayNone"></div>
  <div class="img14 modal displayNone"></div>
  <div class="img15 modal displayNone"></div>
  <div class="img16 modal displayNone"></div>
  <div class="img17 modal displayNone"></div>
  <div class="img18 modal displayNone"></div>
  <div class="img19 modal displayNone"></div>
  <div class="img20 modal displayNone"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <div class="bg"></div>
  <script>

    const bg = document.getElementsByClassName("bg");
    const modal = document.getElementsByClassName("modal");

    window.addEventListener("scroll", () => {
      for (let i = 0; i < 20; i++) {
        if (bg[i].getBoundingClientRect().top <= 100) {
          modal[i].classList.remove("displayNone");
        } else {
          modal[i].classList.add("displayNone");
        }
      }
    });

  </script>
</body>

</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.91%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る