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

前提・実現したいこと

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

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

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

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

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

該当のソースコード

html
1<div class="m-main-content">
2    <section>
3        <div class="one bg01">
4            <div class="bg _01" id="bg01"></div>
5        </div>
6    </section>
7    <section>
8        <div class="one bg02">
9            <div class="bg _02" id="bg02"></div>
10        </div>
11    </section>
12    <section>
13        <div class="one">
14            <div class="bg _03" id="bg03"></div>
15        </div>
16    </section>
17    <section>
18        <div class="one">
19            <div class="bg _04" id="bg04"></div>
20
21        </div>
22    </section>
23    <section>
24        <div class="one">
25            <div class="bg _05" id="bg05"></div>
26        </div>
27    </section>
28</div>

CSS
1section {
2    display: flex;
3}
4.one {
5    display: flex;
6    align-items: center;
7    width: 100%;
8    min-height: 100vh;
9    padding: 20px;
10    height: 200vh;
11}
12.bg {
13    position: fixed;
14    top: 0;
15    left: 0;
16    right: 0;
17    width: 100%;
18    height: 100vh;
19    background-position: center center;
20    background-size: cover;
21    background-repeat: no-repeat;
22    opacity: 0;
23    transition: all 0.5s ease 0s;
24    z-index: -1;
25}
26.show .bg {
27    opacity: 1;
28}
29.bg._01 {
30    background-image: url(../img/index/scene01.png);
31}
32.bg._02 {
33    background-image: url(../img/index/scene02.png);
34}
35.bg._03 {
36    background-image: url(../img/index/scene03.png);
37}
38.bg._04 {
39    background-image: url(../img/index/scene04.png);
40}
41.bg._05 {
42    background-image: url(../img/index/scene05.png);
43}

Jquery
1// スクロール量で背景変更
2$(function () {
3  $(".one").each(function (i, elem) {
4    var one = $(elem).offset().top;
5    $(window).on("load scroll resize", function () {
6      var two = $(window).height();
7      var three = $(window).scrollTop();
8      var showClass = "show";
9      var timing = 300; // 300px, add to css
10      if (three >= one - two + timing) {
11        $(elem).addClass(showClass);
12      } else {
13        $(elem).removeClass(showClass);
14      }
15    });
16  });
17});

試したこと

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

css
1.bg {
2    transform: scale(0);
3}
4.show .bg {
5    transform: scale(2);
6}

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

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

行動規範の内容に同意します

回答2件

ベストアンサー

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

css
1.bg {
2    background-image: url(https://i.imgur.com/EoMSvRb.png);
3}
4
5.bg._01 {
6    transform: scale(0.2);
7}
8
9.bg._02 {
10    transform: scale(0.4);
11}
12.bg._03 {
13     transform: scale(0.6);
14}
15.bg._04 {
16     transform: scale(0.8);
17}
18.bg._05 {
19      transform: scale(1);
20}
21

投稿2020/07/19 14:25

編集2020/07/19 14:44

Jon_do

総合スコア1373

kii.32

2020/07/23 01:04

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

行動規範の内容に同意します

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

HTML
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5  <meta charset="UTF-8">
6  <title>homePage</title>
7  <style>
8    body {
9      height: 1260vh;
10      margin: 0;
11      overflow-x: hidden;
12    }
13
14    .modal {
15      position: fixed;
16      width: 750px;
17      height: 550px;
18      background-size: cover;
19      background-repeat: no-repeat;
20      top: 0;
21      left: 0;
22      right: 0;
23      bottom: 0;
24      margin: auto;
25    }
26
27
28    .img01 {
29      background-image: url(https://i.imgur.com/qSoaaZO.png);
30    }
31
32    .img02 {
33      background-image: url(https://i.imgur.com/Nk2tKwJ.png);
34    }
35
36    .img03 {
37      background-image: url(https://i.imgur.com/aCVYF4E.png);
38    }
39
40    .img04 {
41      background-image: url(https://i.imgur.com/xRUM9Ks.png);
42    }
43
44    .img05 {
45      background-image: url(https://i.imgur.com/YOaPhVn.png);
46    }
47
48    .img06 {
49      background-image: url(https://i.imgur.com/QxowjS1.png);
50    }
51
52    .img07 {
53      background-image: url(https://i.imgur.com/H1emWG2.png);
54    }
55
56    .img08 {
57      background-image: url(https://i.imgur.com/KW9UKEs.png);
58    }
59
60    .img09 {
61      background-image: url(https://i.imgur.com/RWOW2mH.png);
62    }
63
64    .img10 {
65      background-image: url(https://i.imgur.com/iINBKTN.png);
66    }
67
68    .img11 {
69      background-image: url(https://i.imgur.com/OoyrBBj.png);
70    }
71
72    .img12 {
73      background-image: url(https://i.imgur.com/tzs1eN0.png);
74    }
75
76    .img13 {
77      background-image: url(https://i.imgur.com/dL8sBXh.png);
78    }
79
80    .img14 {
81      background-image: url(https://i.imgur.com/cQOK4YU.png);
82    }
83
84    .img15 {
85      background-image: url(https://i.imgur.com/r7dmIDg.png);
86    }
87
88    .img16 {
89      background-image: url(https://i.imgur.com/RUNZPSB.png);
90    }
91
92    .img17 {
93      background-image: url(https://i.imgur.com/aImBIuQ.png);
94    }
95
96    .img18 {
97      background-image: url(https://i.imgur.com/0EjKesH.png);
98    }
99
100    .img19 {
101      background-image: url(https://i.imgur.com/8qDVEmn.png);
102    }
103
104    .img20 {
105      background-image: url(https://i.imgur.com/EoMSvRb.png);
106    }
107
108    .bg {
109      width: 100vw;
110      height: 60vh;
111    }
112
113    .displayNone {
114      display: none;
115    }
116  </style>
117</head>
118
119<body>
120  <div class="img01 modal"></div>
121  <div class="img02 modal displayNone"></div>
122  <div class="img03 modal displayNone"></div>
123  <div class="img04 modal displayNone"></div>
124  <div class="img05 modal displayNone"></div>
125  <div class="img06 modal displayNone"></div>
126  <div class="img07 modal displayNone"></div>
127  <div class="img08 modal displayNone"></div>
128  <div class="img09 modal displayNone"></div>
129  <div class="img10 modal displayNone"></div>
130  <div class="img11 modal displayNone"></div>
131  <div class="img12 modal displayNone"></div>
132  <div class="img13 modal displayNone"></div>
133  <div class="img14 modal displayNone"></div>
134  <div class="img15 modal displayNone"></div>
135  <div class="img16 modal displayNone"></div>
136  <div class="img17 modal displayNone"></div>
137  <div class="img18 modal displayNone"></div>
138  <div class="img19 modal displayNone"></div>
139  <div class="img20 modal displayNone"></div>
140  <div class="bg"></div>
141  <div class="bg"></div>
142  <div class="bg"></div>
143  <div class="bg"></div>
144  <div class="bg"></div>
145  <div class="bg"></div>
146  <div class="bg"></div>
147  <div class="bg"></div>
148  <div class="bg"></div>
149  <div class="bg"></div>
150  <div class="bg"></div>
151  <div class="bg"></div>
152  <div class="bg"></div>
153  <div class="bg"></div>
154  <div class="bg"></div>
155  <div class="bg"></div>
156  <div class="bg"></div>
157  <div class="bg"></div>
158  <div class="bg"></div>
159  <div class="bg"></div>
160  <script>
161
162    const bg = document.getElementsByClassName("bg");
163    const modal = document.getElementsByClassName("modal");
164
165    window.addEventListener("scroll", () => {
166      for (let i = 0; i < 20; i++) {
167        if (bg[i].getBoundingClientRect().top <= 100) {
168          modal[i].classList.remove("displayNone");
169        } else {
170          modal[i].classList.add("displayNone");
171        }
172      }
173    });
174
175  </script>
176</body>
177
178</html>