パーツ番号 02-02-01 ・ CSSのみ

単語ローテーター(縦フリップ)

キャッチコピーの一部だけが縦にめくれて複数の語へ切り替わり続けます。WordPressのヒーロー見出しで訴求ポイントを1行に凝縮するのに便利です。

css

プレビュー

ソースコード

HTML

<div class="d02-02-01-line">
          WordPressで、<span class="d02-02-01-rot"><span>集客する。</span><span>予約を取る。</span><span>売上を伸ばす。</span><span>ファンを増やす。</span></span>
        </div>

CSS

.d02-02-01{background:#0f172a}
        .d02-02-01-line{color:#e2e8f0;font-size:24px;font-weight:800;display:flex;align-items:center;gap:4px}
        .d02-02-01-rot{display:inline-block;height:1.3em;overflow:hidden;position:relative;color:#38bdf8}
        .d02-02-01-rot>span{display:block;height:1.3em;line-height:1.3em;animation:d181flip 8s cubic-bezier(.7,0,.3,1) infinite}
        @keyframes d181flip{
          0%,20%{transform:translateY(0)}
          25%,45%{transform:translateY(-1.3em)}
          50%,70%{transform:translateY(-2.6em)}
          75%,95%{transform:translateY(-3.9em)}
          100%{transform:translateY(-5.2em)}
        }

クラス名 .d02-02-01 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。