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

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

新規登録して質問してみよう
ただいま回答率
85.35%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

2836閲覧

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

kii.32

総合スコア67

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

1クリップ

投稿2020/07/17 14:20

前提・実現したいこと

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

ベストアンサー

追記
画像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

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

0

恐らくこういうことかと思ったので作成してみました。
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>

投稿2020/07/19 14:16

Jon_do

総合スコア1373

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問