No.027
CARD CSSJS

Stacked Cards

重なったカードをクリックすると先頭が背面へ送られて入れ替わる効果。ギャラリー・レビュー表示に。

DEMO

01
02
03
04

↑ カードをクリックで入れ替え

CODE

HTML
<div class="demo-stage"><div class="sk-deck" id="skDeck"><div class="sk-card" style="background:#E91B89">01</div><div class="sk-card" style="background:#1A1A1A">02</div><div class="sk-card" style="background:#7B37A8">03</div><div class="sk-card" style="background:#5BAADE">04</div></div><p class="sk-hint">↑ カードをクリックで入れ替え</p></div>
CSS
.demo-stage { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2.5rem; }
.sk-deck { position:relative; width:210px; height:270px; }
.sk-card { position:absolute; inset:0; border-radius:16px; display:flex; align-items:center; justify-content:center; font-family:'Oswald',sans-serif; font-size:3rem; color:#fff; cursor:pointer; transition:transform .5s cubic-bezier(.4,0,.2,1), opacity .5s ease; box-shadow:0 10px 30px rgba(0,0,0,.18); }
.sk-hint { margin-top:1.5rem; color:#5A5A5A; font-size:.82rem; }
JS
const skDeck = document.getElementById('skDeck');
function skLayout(){
  const cards = Array.prototype.slice.call(skDeck.children);
  cards.forEach(function(c, i){
    c.style.transform = 'translateY(' + (i * -16) + 'px) scale(' + (1 - i * 0.05) + ')';
    c.style.zIndex = cards.length - i;
    c.style.opacity = i > 3 ? 0 : 1;
  });
}
skDeck.addEventListener('click', function(){
  skDeck.appendChild(skDeck.firstElementChild);
  skLayout();
});
skLayout();

AI PROMPT

Claude Cursor v0
PROMPT
重なったカードデッキを作って。各カードはposition:absolute+inset:0、JSで先頭からの順位iに応じてtranslateY(i*-16px)+scale(1-i*0.05)+zIndexを設定。クリックでfirstElementChildをappendChildして末尾へ送り、再レイアウト。transitionは.5s cubic-bezierで滑らかに。

BOOKS · PR · AMAZON

📖 なかしまぁ先生のCSSアニメーション入門 📖 マイクロインタラクション ―UI/UXデザインの神が宿る細部 📖 Fundamentals of Web Animation with GSAP

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

学びを止めない

PR · AMAZONサブスク
📚 Kindle Unlimited — 技術書・デザイン書が読み放題。30日無料体験 → 🎧 Audible — 移動中に耳で学ぶオーディオブック。30日無料体験 → 📦 Amazon Prime — Prime Reading・配送特典つき。30日無料体験 → 🎵 Music Unlimited — 作業用BGMに。1億曲が聴き放題・30日無料体験 →

※当サイトはAmazonアソシエイトプログラムの参加者です。リンクから商品をご購入いただくと、当方に紹介料が発生します。

スタックドカード（Stacked Cards）とは

重なったカードをクリックすると先頭が背面へ送られて入れ替わる効果。ギャラリー・レビュー表示に。この効果は見た目をCSSで整えつつ、JavaScriptでクリックやスクロール・マウス移動などの操作を検知して動きを制御します。

使いどころ

商品カード・記事一覧・料金プラン・チームメンバー紹介など、カード型UIの一覧表示に向く。やりすぎると可読性や操作性を損なうため、目的のある一点に絞って使うのがコツです。

CSS実装のポイント

動きはGPUで処理されやすいtransformとopacityを軸に組み立てると、レイアウトの再計算（リフロー）を避けて滑らかに動きます。width・height・top/leftなど位置やサイズを直接変えるアニメーションは負荷が高いため避けるのが定石です。当サイトのコードはprefers-reduced-motionに対応しており、動きを減らす設定にしている利用者には自動でアニメーションを抑えるよう配慮しています。

CSSとJavaScriptの違い

CSSアニメーションは記述が簡潔で軽く、ブラウザ側で最適化されるため高パフォーマンスですが、操作に応じた複雑な分岐や数値計算は不得意です。一方JavaScriptはイベントに反応して動きを動的に組み立てられる反面、書き方を誤ると処理が重くなりがちです。この効果は見た目はCSS・制御はJavaScriptという役割分担で成り立っています。