セクション間を波で繋ぐアニメーション
概要
色なしのセクションと色付きのセクションの間を波で繋ぐアニメーションです。
セクション間が寂しいなーって時に使えると思います。
セクション間にdivタグを挟み、SVGにて波を描画しています。アニメーションを自然にループさせるため、同じSVGを2つ横に並べています。横に波のSVG1枚分スライドさせるアニメーションにすることで、自然なループにさせています。
コードサンプル
HTML
<div class="container">
<section class="section1">
<p>section1</p>
</section>
<div class="wave-wrapper">
<div class="wave-inner">
<!-- 1枚目 -->
<svg class="wave-svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,40
C 150,80 300,0 450,40
S 750,80 900,40
S 1050,0 1200,40
L1200,120
L0,120
Z"
fill="#08254f"
/>
</svg>
<!-- 2枚目（同じものをもう1枚） -->
<svg class="wave-svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path
d="M0,40
C 150,80 300,0 450,40
S 750,80 900,40
S 1050,0 1200,40
L1200,120
L0,120
Z"
fill="#08254f"
/>
</svg>
</div>
</div>
<section class="section2">
<p>section2</p>
</section>
</div>CSS
.container {
width: 80%;
}
.section1 {
text-align: center;
background: #f4f5f9;
}
.section2 {
text-align: center;
background: #08254f;
color: #f4f5f9;
}
/* 波エリアの器 */
.wave-wrapper {
position: relative;
height: 80px;
overflow: hidden;
background: #f4f5f9; /* 上のセクションと同じ色 */
}
/* 波2枚を横に並べるコンテナ */
.wave-inner {
display: flex;
width: 200%; /* 2枚ぶん */
height: 100%;
animation: wave-move 8s linear infinite;
}
/* 各SVGは半分ずつ */
.wave-svg {
width: 50%;
height: 100%;
flex-shrink: 0;
}
/* 波を横へスライド（開始と終了の絵が完全一致） */
@keyframes wave-move {
from {
transform: translateX(0);
}
to {
transform: translateX(-50%); /* 2枚ぶんのうち1枚分移動 */
}
}
兵庫県神戸市を拠点に"Webコーダー"としてWebサイト構築を行っております。
前職はシステムエンジニアとして、プロジェクトマネージャーからプログラマーまで上流から下流のポジションを経験しました。
システム導入、フロントエンド、バックエンドの開発に携わった経験を元に、Webサイトのコーディングのサポートをいたします。