DEMO
CODE
<div class="demo-stage"><h2 class="wp-text" data-text="Build sites with AI faster than ever"></h2></div>
.demo-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.wp-text { color:#fff; font-family:'Oswald',sans-serif; font-size:clamp(1.6rem,4vw,2.4rem); letter-spacing:.02em; line-height:1.3; text-align:center; max-width:560px; }
.wp-word { display:inline-block; opacity:0; transform:translateY(28px); animation:wp-up .65s cubic-bezier(.16,1,.3,1) forwards; margin-right:.35em; }
.wp-word.accent { color:#E91B89; }
@keyframes wp-up { to { opacity:1; transform:translateY(0); } }
document.querySelectorAll('.wp-text').forEach(function(el){
var text = el.dataset.text || el.textContent;
el.innerHTML = '';
var words = text.split(' ');
words.forEach(function(w, i){
var span = document.createElement('span');
span.className = 'wp-word' + (w.toLowerCase() === 'ai' ? ' accent' : '');
span.textContent = w;
span.style.animationDelay = (i * 0.09) + 's';
el.appendChild(span);
});
});
AI PROMPT
見出しの単語が1個ずつ下から浮き上がるWord Pull Upを作って（Magic UI定番）。JSでテキストを空白区切りでspan化、各spanにanimation-delay = index * 0.09s を付与。CSSで初期opacity:0+translateY(28px)、cubic-bezier(.16,1,.3,1)で.65s かけて translateY(0)+opacity:1 へ。特定キーワード（例:AI）にはaccentクラスでハイライト色も付ける。LPヒーロー・記事タイトル・キャッチコピーに最適。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
見出しの単語が1つずつ下からスライドして現れるMagic UI定番のテキストエントランス。LP・ヒーロー・記事タイトルに。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。