入力するとデモ・コード・AIプロンプトが全て即座に書き換わります。文字数に応じて自動で stagger delay も調整されます。
<div class="split-text"> <span>A</span><span>R</span><span>C</span> <span>H</span><span>I</span><span>T</span> <span>E</span><span>C</span><span>T</span> </div>
.split-text {
font-family: 'Oswald', sans-serif;
font-size: 5rem;
font-weight: 600;
letter-spacing: 0.15em;
color: #1A1A1A;
display: flex;
gap: 0.05em;
cursor: pointer;
}
.split-text span {
display: inline-block;
transform: translateY(0);
transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1),
color 0.4s ease;
}
.split-text:hover span {
transform: translateY(-20px);
color: #E91B89;
}
/* Stagger each character */
.split-text:hover span:nth-child(1) { transition-delay: 0.00s; }
.split-text:hover span:nth-child(2) { transition-delay: 0.04s; }
.split-text:hover span:nth-child(3) { transition-delay: 0.08s; }
.split-text:hover span:nth-child(4) { transition-delay: 0.12s; }
.split-text:hover span:nth-child(5) { transition-delay: 0.16s; }
/* ... continue for each character ... */
@media (prefers-reduced-motion: reduce) {
.split-text span { transition: color 0.4s ease; }
.split-text:hover span { transform: none; }
}Implement a "Text Split" stagger animation. Behavior: - Each character of the target text wraps in its own <span>. - On parent hover, every character translateY(-20px) and shifts color to brand accent (#E91B89). - Stagger: each subsequent character has +0.04s transition-delay. - Easing: cubic-bezier(0.65, 0, 0.35, 1), duration 0.6s. Constraints: - Pure CSS preferred. Use :nth-child for stagger. - If the text is dynamic, use vanilla JS to wrap each char on load. - Respect prefers-reduced-motion: keep color transition only. Output: HTML structure + CSS. If JS char-wrapping is needed, include it as a 3rd block.
Build a "Text Split" hover animation:
Approach:
- Wrap each character of the heading in <span>.
- Display the parent as flex with small gap (0.05em).
- On parent:hover, each span translates Y -20px with staggered transition-delay.
Stagger formula: delay = index * 0.04s
Easing: cubic-bezier(0.65, 0, 0.35, 1), 0.6s
Color shift on hover: #1A1A1A → #E91B89
For dynamic text, generate this JS helper:
function splitChars(el) {
el.innerHTML = [...el.textContent].map(c =>
c === ' ' ? ' ' : `<span>${c}</span>`
).join('');
}
A11y: @media (prefers-reduced-motion: reduce) → no transform, only color.Create a React component <SplitText> with props:
- text: string
- triggerOn?: 'hover' | 'view' (default 'hover')
- staggerMs?: number (default 40)
Implementation:
- Split text into characters: [...text].map((char, i) => ...)
- Render each as a <span> with style={{ transitionDelay: `${i * staggerMs}ms` }}
- Wrap in a container with relative positioning.
Tailwind:
- Container: inline-flex gap-[0.05em] cursor-pointer
- Each span: inline-block transition-all duration-[600ms] ease-[cubic-bezier(0.65,0,0.35,1)]
- On group-hover: translate-y-[-20px] text-pink-600 (or arbitrary #E91B89)
Use group + group-hover utilities for the parent-controlled hover.
Honor prefers-reduced-motion via Tailwind motion-safe: variants.※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
文字を1つずつに分解し、時間差でアニメーションさせる。文章が呼吸するように立ち上がる。建築でいう連続するファサード。この効果はCSSの@keyframesアニメーションとtransition／transformだけで実装でき、JavaScriptを必要としません。
ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは@keyframesやtransitionで宣言的に書け、ブラウザが最適化するため軽量です。JavaScriptを使う方法は細かい制御やインタラクションに強い反面、コード量が増えやすくなります。この効果はJavaScriptなしのCSSだけで完結するため、読み込みが軽く保守も簡単という利点があります。