学びをカタチに
未来を変える
学びをカタチに
カーテンアニメーション付きのヒーローセクション。CSSアニメーションとclip-pathを使った視覚的にインパクトのあるファーストビューです。
<div class="hero-container">
<div class="hero-content-text">
<h1>
<span class="curtain"><span>学びをカタチに</span></span>
<span class="curtain"><span>未来を変える</span></span>
</h1>
</div>
<div class="hero-content-img">
<img src="./img/hero.jpg" alt="画像１" />
</div>
</div>
.curtain 要素は二重のspan構造になっています。外側のspanでカーテン（白い矩形）を作り、内側のspanでテキストのフェードインを制御します。
::after疑似要素でカーテンを作り、内側のspanでテキストの透明度を独立して制御するためです。
.curtain {
position: relative;
display: inline-block;
}
.curtain span {
opacity: 0; /* テキストは最初非表示 */
display: inline-block;
}
@keyframes curtain {
0% {
transform-origin: left center; /* 左から展開 */
transform: scaleX(0);
}
49.999% {
transform-origin: left center;
transform: scaleX(1); /* 完全に広がる */
}
50% {
transform-origin: right center; /* 右を基点に切り替え */
transform: scaleX(1);
}
100% {
transform-origin: right center;
transform: scaleX(0); /* 右へ収縮 */
}
}
transform-originを切り替えることで、カーテンが「左から展開→右へ収縮」という自然な動きを実現しています。
@keyframes fadeInText {
0% { opacity: 0; }
21% { opacity: 0; } /* カーテンが広がるまで待つ */
22% { opacity: 1; } /* カーテンが覆った瞬間に表示 */
100% { opacity: 1; }
}
カーテンがテキストを覆った瞬間（約22%時点）にテキストを表示します。これにより、カーテンの下からテキストが現れる効果が生まれます。
.curtain:nth-of-type(2) span {
animation: fadeInText 4s ease-in-out 2s forwards;
}
.curtain:nth-of-type(2):after {
animation: curtain 2s ease 2s forwards;
}
2sのディレイを設定することで、1行目のアニメーション終了後に2行目が始まります。
.hero-content-img img {
width: 100%;
height: 100%;
clip-path: polygon(50% 0%, 100% 0%, 100% 100%, 0% 100%);
}
clip-path: polygon() で画像を多角形にクリッピング。4つの座標で台形を定義しています。
polygon(左上, 右上, 右下, 左下)の形式で、各点をx% y%で指定します。.hero-content-text h1 {
font-size: clamp(1.5rem, 5vw, 4.5rem);
}
clamp(最小値, 推奨値, 最大値) は、レスポンシブなサイズ指定に便利な関数です。
@media screen and (max-width: 767px) {
.hero-container {
flex-direction: column;
}
.hero-content-img img {
clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
/* 斜めカットを解除して矩形に */
}
}
モバイルでは縦並びにし、clip-pathを通常の矩形に変更しています。