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

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

新規登録して質問してみよう
ただいま回答率
87.20%
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オブジェクト」のメソッドとして定義されています。

解決済

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

kosukemiura
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オブジェクト」のメソッドとして定義されています。

1回答

0評価

1クリップ

252閲覧

投稿2022/05/26 06:02

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

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

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

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

html

<div class="wrapper"> <div class="mv"> <h2 class="mv__title"> <picture> <source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/mv-title.png"> <source media="(max-width: 767px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/sp/mv-title.png"> <img src="<?php echo get_template_directory_uri() ?>/img/top/mv-title.png" alt="FOR 100YEARS OF ALL"> </picture> </h2> <div class="mv__text"> <picture> <source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/mv-text.png"> <source media="(max-width: 767px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/sp/mv-text.png"> <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"> </picture> </div> <a href="#" class="mv__news"> <p class="mv__date">2022.04.01</p> <p class="mv__ttl">運動&お料理デイサービス「キラリ」オープン</p> </a> </div> <section class="concept"> <div class="concept__area"> <h2 class="concept__title"> <picture> <source media="(min-width: 768px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/concept-title.png"> <source media="(max-width: 767px)" srcset="<?php echo get_template_directory_uri() ?>/img/top/sp/concept-title.png"> </picture> <img src="<?php echo get_template_directory_uri() ?>/img/top/concept-title.png" alt="人生100年時代をプロデュースする企業へ。"> </h2> <div class="concept__textContents"> <p class="concept__text"> 暮らしを360度視点で考える。<br> 住まうこと、楽しむこと、<br> 健康であること、人を支えること…<br> 暮らしをあらゆる角度から眺めると、<br> さまざまな課題や問題が見えてきます。<br> インテグラルグループは、それらに対する<br> ベストアンサーを提供していきます。 </p> <a href="#" class="moreArea"> <div class="more__line"></div> <p class="more__text">CONCEPT</p> </a> </div> </div> </section> </div>

css

.wrapper { background: url(../img/top/bg-mv.jpg) center center / cover no-repeat; background-attachment: fixed; @include mq(sp) { background: url(../img/top/sp/bg-mv.jpg) center center / cover no-repeat; } } // mv .mv { height: 100vh; position: relative; .mv__title { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width: 692px; @include mq(sp) { width: 100%; max-width: 77.8667vw; } } .mv__text { position: absolute; top: calc(50% + 140px); left: 50%; transform: translate(-50%, -50%); max-width: 692px; @include mq(sp) { top: calc(50% + 53vw); width: 100%; max-width: 86.4vw; } } .mv__news { position: absolute; right: 30px; bottom: 15px; display: flex; align-items: center; @include mq(sp) { display: block; right: 50%; transform: translateX(50%); bottom: 21px; } .mv__date { color: #fff; font-size: rem(14); letter-spacing: 0.07em; font-family: $font-yu; @include mq(sp) { font-weight: 700; } } .mv__ttl { margin-left: 21px; color: #fff; font-size: rem(14); letter-spacing: 0.07em; font-family: $font-yu; @include mq(sp) { margin: 15px 0 0; white-space: nowrap; } } } } // concept .concept { padding: 350px 15px 266px; background: linear-gradient(transparent, rgba(255, 255, 255, 1)); @include mq(sp) { padding: 248px 25px 177px; } .concept__area { max-width: 1080px; margin: 0 auto; display: flex; justify-content: space-between; @include mq(sp) { display: block; } .concept__title { flex: 0 1 55.5556%; @include mq(sp) { flex: 0 1 100%; width: 80vw; } } .concept__textContents { flex: 0 1 34.9074%; @include mq(sp) { margin-top: 61px; flex: 0 1 100%; } .concept__text { font-size: rem(18); line-height: calc(44 / 18); letter-spacing: 0.11em; font-weight: 700; @include mq(sp) { font-size: rem(15); line-height: calc(37 / 15); } } .moreArea { margin-top: 63px; @include mq(sp) { display: block; width: 206px; margin: 64px 0 0 auto; } } } } }

良い質問の評価を上げる

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

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

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

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

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

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

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

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

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

yambejp

2022/05/26 06:10

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

2022/05/26 06:28

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

2022/05/26 06:41

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

まだ回答がついていません

会員登録して回答してみよう

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

ただいまの回答率
87.20%

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

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

質問する

関連した質問

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

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オブジェクト」のメソッドとして定義されています。