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 }
回答1件
あなたの回答
tips
プレビュー