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

タイプフリップ見出し(パタパタ時計風)

単語がフリップクロックのように縦へめくれながら連続的に切り替わり続けます。WordPressのヒーロー見出しで提供サービスや強みを畳みかけるように見せたいときに使えます。

css3d

プレビュー

ソースコード

HTML

<div class="d02-11-01-card">
          <div class="d02-11-01-rotor">
            <span>集客</span><span>採用</span><span>販売</span><span>発信</span>
          </div>
        </div>

CSS

.d02-11-01{background:#111827}
        .d02-11-01-card{background:#1f2937;border-radius:10px;padding:16px 30px;box-shadow:0 6px 18px rgba(0,0,0,.35),inset 0 -2px 0 rgba(255,255,255,.05)}
        .d02-11-01-rotor{height:1.3em;overflow:hidden;position:relative;font-size:30px;font-weight:900;color:#facc15;letter-spacing:.03em}
        .d02-11-01-rotor span{display:block;height:1.3em;line-height:1.3em;animation:d1171flip 8s cubic-bezier(.7,0,.3,1) infinite}
        @keyframes d1171flip{
          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)}
        }
        @media (prefers-reduced-motion: reduce){
          .d02-11-01-rotor span{animation:none}
        }

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