Q&A
.mv の背景の上で、.mv の子要素の下にしたい、ということですか？
実現したいこと
WEBサイトの背景をパララックスのようなイメージでgsapのscroll triggerを用いて動かしたい。
今後「当社について〜」などセクションごとに白地を置いて上にテキストを入れたく、その際にも背景のgaspで作成したboxが動くようにしたい。
▼サイトのイメージ
https://coconala.co.jp/recruit/
発生している問題・エラーメッセージ
gsapで動かしたいboxがtopのMVよりも上にきてしまう
全体の背景になるようにしたい。
該当のソースコード
html
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <title>Document</title> 7 <link rel="stylesheet" href="style.css"> 8 9</head> 10<body> 11 <div class="top"> 12 <div class="mv"> 13 </div> 14 15 </div> 16 <section class="animation-area" id="boxs"> 17 <div class="box green"> 18 </div> 19 <div class="box green"> 20 </div> 21 <div class="box green"> 22 </div> 23 24 </section> 25 <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/gsap.min.js"></script> 26<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.2/ScrollTrigger.min.js"></script> 27<script src="script.js"></script> 28</body> 29</html>
css
1*{ 2 padding: 0; 3 margin: 0; 4} 5.animation-area{ 6 width:100%; 7 padding: 20vh 20px 0; 8} 9.box { 10 width: 100px; 11 height: 100px; 12 margin: 40px 0; 13 border-radius:5px; 14 z-index: -100; 15} 16.green{ 17 background-color: green; 18} 19.top{ 20 height: 1000px; 21 background-color: rgb(247, 133, 39); 22 z-index: 100; 23}
js
1gsap.to('.box',.5,{ 2 y:-500, 3 4 scrollTrigger:{ 5 trigger:'section', 6 start:'top center', 7 } 8});
試したこと
背景をcssにすることも考えましたが、gsapが反応しなくなってしまうのと
z-indexを使いたかったのですが、セクションが異なるのでうまくできませんでした。
どうぞよろしくお願いいたします。
ありがとうございます。
.mvのみならず以下のサイトのようなイメージで
サイト全体の背景にgsapで動くboxを配置したいです。
https://coconala.co.jp/recruit/
回答になっていなかったらすみません。
よろしくお願いいたします。
たとえば、.mv には背景がついていますが、この場合はこの背景の上ですか下ですか？ .mvの子要素の背景についてはどうですか？
遅れてしまい申し訳ございません。
.mvは最前面に来ます。
時間が経ってしまい大変恐縮ですが、もしお分かりでしたら、
ご返答いただけますと幸いです。
よろしくお願いいたします。
.mv のオレンジの背景色の後ろに、.box を隠したい、ということなのですね。理解しました。
position: relative;を追加したところboxが背面にいくようになりました。
ありがとうございます。
回答1件
0
ベストアンサー
以下のようにしてみてはどうでしょうか。
css
1.box { 2 width: 100px; 3 height: 100px; 4 margin: 40px 0; 5 border-radius: 5px; 6 z-index: -100; 7 position: relative; /* 追加 */ 8}
投稿2023/07/19 09:37
総合スコア37736
お礼が質問へのコメントになってしまってました。
ご回答いただきありがとうございます。
また進めてみて不明な点が出てきまして、
追加で質問をしましたので、もしお分かりになるようでしたらご回答いただけますと幸いです。
よろしくお願いいたします。
あなたの回答
tips
プレビュー
