パーツ番号 07-01-12 ・ CSSのみ

スクロールリビール・スタガーグリッド

画面に入ると2×2のタイルが時間差で拡大しながら浮かび上がるギャラリー。WordPressの施工事例やフォトギャラリーの導入部で視線を引きつけます。

galleryscrollcss

プレビュー

ソースコード

HTML

<div class="d07-01-12-grid io-reveal">
          <div class="d07-01-12-tile"><span>🏛️</span></div>
          <div class="d07-01-12-tile"><span>🗼</span></div>
          <div class="d07-01-12-tile"><span>⛩️</span></div>
          <div class="d07-01-12-tile"><span>🏰</span></div>
        </div>

CSS

.prev.d07-01-12{background:#f1f2f5}
        .d07-01-12-grid{display:grid;grid-template-columns:repeat(2,84px);gap:10px}
        .d07-01-12-tile{
          height:74px;border-radius:12px;display:flex;align-items:center;justify-content:center;
          box-shadow:0 6px 14px rgba(0,0,0,.12);
          opacity:0;transform:translateY(24px) scale(.9);
          transition:opacity .55s ease,transform .55s cubic-bezier(.22,.9,.3,1);
        }
        .d07-01-12-tile span{font-size:28px}
        .d07-01-12-grid.is-in .d07-01-12-tile{opacity:1;transform:translateY(0) scale(1)}
        .d07-01-12-grid.is-in .d07-01-12-tile:nth-child(1){transition-delay:.05s}
        .d07-01-12-grid.is-in .d07-01-12-tile:nth-child(2){transition-delay:.18s}
        .d07-01-12-grid.is-in .d07-01-12-tile:nth-child(3){transition-delay:.31s}
        .d07-01-12-grid.is-in .d07-01-12-tile:nth-child(4){transition-delay:.44s}
        .d07-01-12-tile:nth-child(1){background:linear-gradient(135deg,#f59e0b,#ef4444)}
        .d07-01-12-tile:nth-child(2){background:linear-gradient(135deg,#38bdf8,#6366f1)}
        .d07-01-12-tile:nth-child(3){background:linear-gradient(135deg,#f472b6,#a855f7)}
        .d07-01-12-tile:nth-child(4){background:linear-gradient(135deg,#34d399,#0ea5e9)}

クラス名 .d07-01-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。