Live Demo
マウスを乗せるかTabキーでフォーカスして動作を確認してください。
Source Code
必要なコードをコピーして実装に利用できます。
HTML
<div class="tbx-1243"><a class="headline" href="#article"><small>EDITORIAL / 01</small><span class="words" data-text="Ideas in Motion">Ideas in Motion</span><span class="sub">Read the story <b aria-hidden="true">→</b></span></a></div>CSS
.tbx-1243{box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;max-width:100%;min-height:212px;overflow:hidden;padding:16px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193647;}
.tbx-1243 *, .tbx-1243 *::before,.tbx-1243 *::after{box-sizing:border-box}
.tbx-1243{background:#f0ece7}.tbx-1243 .headline{display:grid;gap:9px;max-width:100%;color:#263c3d;text-decoration:none;padding:16px 6px}.tbx-1243 .headline small{font-size:10px;letter-spacing:.19em;color:#817469;font-weight:700}.tbx-1243 .words{font-size:clamp(23px,4vw,32px);font-weight:900;letter-spacing:-.055em;line-height:1.15;background:linear-gradient(90deg,#c66b4a 0%,#c66b4a 50%,#263c3d 50%,#263c3d 100%) 100% 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;transition:background-position .6s cubic-bezier(.2,.8,.2,1)}.tbx-1243 .sub{display:flex;justify-content:space-between;padding-top:8px;border-top:1px solid #c7beb3;font-size:11px;color:#645c55}.tbx-1243 .sub b{transition:transform .35s}.tbx-1243 .headline:is(:hover,:focus-visible) .words{background-position:0 0}.tbx-1243 .headline:is(:hover,:focus-visible) .sub b{transform:translateX(8px)}
@media(prefers-reduced-motion:reduce){.tbx-1243 *, .tbx-1243 *::before, .tbx-1243 *::after{{transition-duration:0.01ms!important;animation-duration:0.01ms!important;scroll-behavior:auto!important}}}
How to Use
HTMLを設置し、CSSを既存サイトのスタイルシートに追加します。既存クラスとの競合を避け、サイトの配色・サイズに合わせて調整してください。
Use Case
Editorial, Typography
Technical Notes
ホバー非対応端末でも主要操作ができるようにし、キーボードフォーカス時の表示と動き軽減設定を確認してください。
Mobile：タッチ端末はホバーできないことがあります。必要な操作や情報はタップでも利用できるようにしてください。
Browser：最新版のChrome・Safari・Firefox・Edgeを推奨。
Reduced Motion：prefers-reduced-motion: reduce対応。