DEMO
CODE
<div class="demo-stage rw-stage"><div class="rw-text">I build <span class="rw-rotator"><span class="rw-word">websites</span><span class="rw-word">apps</span><span class="rw-word">brands</span><span class="rw-word">ideas</span></span></div></div>
.rw-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.rw-text { color:#fff; font-family:'Oswald',sans-serif; font-size:clamp(1.6rem,5vw,2.6rem); letter-spacing:.03em; }
.rw-rotator { display:inline-block; position:relative; height:1.2em; overflow:hidden; vertical-align:bottom; }
.rw-word { display:block; color:#E91B89; transition:transform .5s cubic-bezier(.7,0,.2,1); }
(function(){
var rotator = document.querySelector('.rw-rotator');
if(!rotator) return;
var words = rotator.querySelectorAll('.rw-word');
var i = 0;
setInterval(function(){
i = (i + 1) % words.length;
words.forEach(function(w){ w.style.transform = 'translateY(-' + (i * 100) + '%)'; });
}, 1600);
})();
AI PROMPT
固定文に続く単語が縦にスライドして入れ替わるヒーローコピーを作って。回転部は inline-block + height:1.2em + overflow:hidden の窓にし、中に単語を縦並び（display:block）。各 .word に transition:transform .5s。setIntervalで index を進め、全単語に transform:translateY(-(index*100)%) を適用すると列が上にスライドして次の語が窓に入る。「I build ___」のようなヒーロー見出しに。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
固定の文に続く単語が縦にスライドして入れ替わるヒーローコピー。「I build ___」の___が websites→apps→… と回る定番表現。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ヒーローの見出し・キャッチコピー・セクションタイトルなど、視線を集めたいテキストに向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。