Q&A
実現したいこと
お世話になります。
初心者コーダーです。
株式会社gigさん（https://giginc.co.jp/）のファーストビューの右側にある斜めになっている黒い四角形が上から下に降りてくる実装をしたいと思っています。
発生している問題・分からないこと
斜めになっていない普通の四角形であれば、keyframesやgsapで上から下に降りてくる実装ができるのですが、四角形の左側の線が斜めになっているため、アニメーション終了後に右下に空欄ができたりして思うように作ることができません。現在のコードでは、台形がそのまま上から下に降りてくる形となっており、お手本のような動きになっていない現状となっております。
該当のソースコード
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>（株）gig2</title> 7 <link rel="stylesheet" href="style.css"> 8</head> 9 10<body> 11 <section id="mainvisual"> 12 <div class="hero"> 13 hirocode 14 </div> 15 </section> 16 <script src="https://cdn.jsdelivr.net/npm/gsap@3.13.0/dist/gsap.min.js"></script> 17 <script src="main.js"></script> 18</body> 19</html>
css
1@charset "utf-8"; 2body { 3 margin: 0; 4 padding: 0; 5} 6 7#mainvisual { 8 width: 100%; 9 height: 700px; 10 position: relative; 11} 12 13.hero { 14 width: 50vw; 15 height: 100vh; 16 display: grid; 17 place-items: center; 18 background-color: #0cf; 19 overflow: hidden; 20 position: absolute; 21 left: 50%; 22 clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%); 23}
gsap
1'use strict'; 2 3{ 4gsap.from(".hero", { 5 y: "-100%", 6 scaleY: 0, 7 ease: "none", 8}); 9 10}
試したこと・調べたこと
- teratailやGoogle等で検索した
- ソースコードを自分なりに変更した
- 知人に聞いた
- その他
上記の詳細・結果
ここ3日間ほど、株式会社gigさんのディベロッパーツールでコードをコピペして真似してみたり、chatGPTやGeminiなどに相談しつつ作成していますが、お手本の形になりません。どのように実装すれば、左上から右下に降りてきて、ファーストビューに隙間なく広がる台形を実現することができるか教えてください。GSAPでなくても構いません。お忙しい中恐縮ですが、どうぞ宜しくお願いいたします。🙇♀️
補足
特になし
回答1件
0
ベストアンサー
これでどうでしょうか。
サンプル：https://jsfiddle.net/Lhankor_Mhy/7tgLqfjn/
css
1div { 2 height: 100vh; 3 4 &:hover { 5 &::before { 6 7 clip-path: inset(0px 0px 0%); 8 } 9 } 10 11 &::before { 12 content: ""; 13 position: absolute; 14 right: 0px; 15 width: 50vw; 16 height: 150vh; 17 background-color: black; 18 rotate: atan2(-25vw, 100vh); 19 transform-origin: 0% 0%; 20 clip-path: inset(0px 0px 100%); 21 transition: clip-path .8s .4s cubic-bezier(0.55, 0.085, 0.68, 0.53); 22 } 23}
なお、Firefoxにはバグがあるらしく、動作しないです。
1802744 - css atan2() should support like 'atan2(10px, 10vh)'
投稿2025/12/01 01:38
総合スコア37667
あなたの回答
tips
プレビュー
2025/12/01 05:10
2025/12/01 05:18