DEMO
CODE
<div class="demo-stage cfg-stage"><div class="cfg-frame"><div class="cfg-slide active">01</div><div class="cfg-slide">02</div><div class="cfg-slide">03</div></div></div>
.cfg-stage { display:flex; align-items:center; justify-content:center; padding:3rem; background:#0F0F12; min-height:280px; }
.cfg-frame { position:relative; width:min(320px,80%); height:180px; border-radius:14px; overflow:hidden; }
.cfg-slide { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:3rem; color:#fff; opacity:0; transition:opacity 1s ease; }
.cfg-slide.active { opacity:1; }
.cfg-slide:nth-child(1) { background:linear-gradient(135deg,#e91b89,#7b37a8); }
.cfg-slide:nth-child(2) { background:linear-gradient(135deg,#7b37a8,#5baade); }
.cfg-slide:nth-child(3) { background:linear-gradient(135deg,#5baade,#e91b89); }
(function(){
var slides = document.querySelectorAll('.cfg-slide');
if(!slides.length) return;
var i = 0;
setInterval(function(){
slides[i].classList.remove('active');
i = (i + 1) % slides.length;
slides[i].classList.add('active');
}, 1800);
})();
AI PROMPT
複数スライドが一定間隔でクロスフェードするギャラリーを作って。各スライドを position:absolute; inset:0 で重ね、opacity:0 + transition:opacity 1s、activeクラスで opacity:1。setIntervalで現在のactiveを外し次のスライドに付ける（i=(i+1)%length）。ヒーロー背景・実績スライドショーに。
BOOKS · PR · AMAZON
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
学びを止めない · AMAZONサブスク
※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。
複数のスライドが一定間隔でクロスフェードして切り替わるギャラリー。ヒーロー背景・実績スライドショーの定番。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。
ページ遷移・ギャラリーの切り替え・タブの内容差し替えなど、画面の入れ替え演出に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。
動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。
CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。