DEMO
CODE
<div class="demo-stage" style="padding:0"><div class="wd-box"><span>WAVE DIVIDER</span><svg class="wd-svg" viewBox="0 0 2880 90" preserveAspectRatio="none"><path d="M0,46 C120,80 360,80 720,46 C1080,12 1320,12 1440,46 C1560,80 1800,80 2160,46 C2520,12 2760,12 2880,46 L2880,90 L0,90 Z"></path></svg></div></div>
.wd-box { position:relative; min-height:280px; background:#1A1A1A; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.wd-box span { position:relative; z-index:2; font-family:'Oswald',sans-serif; font-size:1.7rem; letter-spacing:.3em; color:#fff; }
.wd-svg { position:absolute; bottom:0; left:0; width:200%; height:90px; animation:wd-slide 9s linear infinite; }
.wd-svg path { fill:#E91B89; }
@keyframes wd-slide { to { transform:translateX(-50%); } }
AI PROMPT
横に流れる波形のセクション区切りを作って。SVGのviewBoxを2周期分（例 0 0 2880 90）取り、pathに同一の波を2回連続で描く。SVGをwidth:200%でコンテナに敷き、transform:translateX(0→-50%)を9s linear infiniteでループ。2周期が同形なので継ぎ目なく流れ続ける。preserveAspectRatio:none。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
セクション境界を波形で区切り、波が横に流れ続けるSVGディバイダー。LPのセクション切り替えに。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ロゴ・アイコン・図版・セクションの区切りなど、ベクター図形をいかした表現に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。