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

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

新規登録して質問してみよう
ただいま回答率
85.50%
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

解決済

1回答

2709閲覧

スクロール量に応じてopacityの値を変更したい

kosukemiura

総合スコア2

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クリップ

投稿2022/05/26 06:02

https://www.fastretailing.com/careers/ja/

こちらのサイトのmvのように、スクロール量に応じて背景のopacityの値を変更するには、どのようなコードを記載すれば良いのでしょうか。

現状、cssのlinear-gradientを使用してグラデーションで表現する以外の方法が思いつかず、困っております。

よろしければご回答いただけますと幸いです。

html

1 <div class="wrapper"> 2 <div class="mv"> 3 <h2 class="mv__title"> 4 <picture> 5 <source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/mv-title.png"> 6 <source media="(max-width: 767px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/sp/mv-title.png"> 7 <img src="<?php echo get_template_directory_uri() ?>/img/top/mv-title.png" alt="FOR 100YEARS OF ALL"> 8 </picture> 9 </h2> 10 <div class="mv__text"> 11 <picture> 12 <source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/mv-text.png"> 13 <source media="(max-width: 767px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/sp/mv-text.png"> 14 <img src="<?php echo get_template_directory_uri() ?>/img/top/mv-text.png" alt="We have a 360 degree perspective view of living. About residing, eating, and supporting people, We think from various perspectives and turn those answers into Residences and Services to provide. A better living is a better life. We plan, design and build different kinds of houses such as apartments, condominiums and custom built houses. We also plan and operate for thd food and beverage industry and nursing homes With all things we have learned, we produce your way of living, your way of life"> 15 </picture> 16 </div> 17 <a href="#" class="mv__news"> 18 <p class="mv__date">2022.04.01</p> 19 <p class="mv__ttl">運動&お料理デイサービス「キラリ」オープン</p> 20 </a> 21 </div> 22 23 <section class="concept"> 24 <div class="concept__area"> 25 <h2 class="concept__title"> 26 <picture> 27 <source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/concept-title.png"> 28 <source media="(max-width: 767px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/sp/concept-title.png"> 29 </picture> 30 <img src="<?php echo get_template_directory_uri() ?>/img/top/concept-title.png" alt="人生100年時代をプロデュースする企業へ。"> 31 </h2> 32 <div class="concept__textContents"> 33 <p class="concept__text"> 34 暮らしを360度視点で考える。<br> 35 住まうこと、楽しむこと、<br> 36 健康であること、人を支えること…<br> 37 暮らしをあらゆる角度から眺めると、<br> 38 さまざまな課題や問題が見えてきます。<br> 39 インテグラルグループは、それらに対する<br> 40 ベストアンサーを提供していきます。 41 </p> 42 <a href="#" class="moreArea"> 43 <div class="more__line"></div> 44 <p class="more__text">CONCEPT</p> 45 </a> 46 </div> 47 </div> 48 </section> 49 </div>

css

1 .wrapper { 2 background: url(../img/top/bg-mv.jpg) center center / cover no-repeat; 3 background-attachment: fixed; 4 5 @include mq(sp) { 6 background: url(../img/top/sp/bg-mv.jpg) center center / cover no-repeat; 7 } 8 } 9 10 // mv 11 12 .mv { 13 height: 100vh; 14 position: relative; 15 16 .mv__title { 17 position: absolute; 18 top: 50%; 19 left: 50%; 20 transform: translate(-50%, -50%); 21 max-width: 692px; 22 23 @include mq(sp) { 24 width: 100%; 25 max-width: 77.8667vw; 26 } 27 } 28 29 .mv__text { 30 position: absolute; 31 top: calc(50% + 140px); 32 left: 50%; 33 transform: translate(-50%, -50%); 34 max-width: 692px; 35 36 @include mq(sp) { 37 top: calc(50% + 53vw); 38 width: 100%; 39 max-width: 86.4vw; 40 } 41 } 42 43 .mv__news { 44 position: absolute; 45 right: 30px; 46 bottom: 15px; 47 display: flex; 48 align-items: center; 49 50 @include mq(sp) { 51 display: block; 52 right: 50%; 53 transform: translateX(50%); 54 bottom: 21px; 55 } 56 57 .mv__date { 58 color: #fff; 59 font-size: rem(14); 60 letter-spacing: 0.07em; 61 font-family: $font-yu; 62 63 @include mq(sp) { 64 font-weight: 700; 65 } 66 } 67 68 .mv__ttl { 69 margin-left: 21px; 70 color: #fff; 71 font-size: rem(14); 72 letter-spacing: 0.07em; 73 font-family: $font-yu; 74 75 @include mq(sp) { 76 margin: 15px 0 0; 77 white-space: nowrap; 78 } 79 } 80 } 81 } 82 83 // concept 84 85 .concept { 86 padding: 350px 15px 266px; 87 background: linear-gradient(transparent, rgba(255, 255, 255, 1)); 88 89 @include mq(sp) { 90 padding: 248px 25px 177px; 91 } 92 93 .concept__area { 94 max-width: 1080px; 95 margin: 0 auto; 96 display: flex; 97 justify-content: space-between; 98 99 @include mq(sp) { 100 display: block; 101 } 102 103 .concept__title { 104 flex: 0 1 55.5556%; 105 106 @include mq(sp) { 107 flex: 0 1 100%; 108 width: 80vw; 109 } 110 } 111 112 .concept__textContents { 113 flex: 0 1 34.9074%; 114 115 @include mq(sp) { 116 margin-top: 61px; 117 flex: 0 1 100%; 118 } 119 120 .concept__text { 121 font-size: rem(18); 122 line-height: calc(44 / 18); 123 letter-spacing: 0.11em; 124 font-weight: 700; 125 126 @include mq(sp) { 127 font-size: rem(15); 128 line-height: calc(37 / 15); 129 } 130 } 131 132 .moreArea { 133 margin-top: 63px; 134 135 @include mq(sp) { 136 display: block; 137 width: 206px; 138 margin: 64px 0 0 auto; 139 } 140 } 141 } 142 } 143 }

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

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

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

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

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

yambejp

2022/05/26 06:10

フォアグラウンドのHTMLのopacityを調整すればいいのでは?
kosukemiura

2022/05/26 06:28

すみません、どういった意味でしょうか。
yambejp

2022/05/26 06:41

背景のopacityを変更する意味があるのか?・・・という意味です 回答を参照ください
guest

回答1

0

ベストアンサー

javascript

1<style> 2body{ 3margin:0; 4padding:0; 5} 6.wrap{ 7 height:200%; 8 background-Image:url(https://placehold.jp/ff0000/00000/100x100.png?text=test); 9} 10#fore{ 11opacity:0; 12height:100%; 13background-Color:white; 14} 15</style> 16<script> 17window.addEventListener('scroll',()=>{ 18 const r=fore.getBoundingClientRect(); 19 let ratio=-r.top*2/r.height; 20 fore.style.opacity=ratio; 21}); 22 23</script> 24</script> 25<div class="wrap"> 26<div id="fore"></div> 27</div> 28``

投稿2022/05/26 06:40

yambejp

総合スコア114572

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

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

kosukemiura

2022/05/26 07:11

実装できましたありがとうございます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問