← 動的パーツギャラリーへ戻る

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

スタッガー出現カード

スクロールで画面に入ると小カード3枚が時間差でフェードアップ。WordPressのサービス紹介セクションの導入演出に使えます。

scrollcss

プレビュー

ソースコード

HTML

<div class="wrap05-01-07 io-reveal">
          <div class="mini05-01-07"><span class="dot05-01-07 c1037"></span><h4>高速表示</h4><p>表示速度を最適化</p></div>
          <div class="mini05-01-07"><span class="dot05-01-07 c2037"></span><h4>SEO対策</h4><p>内部構造を改善</p></div>
          <div class="mini05-01-07"><span class="dot05-01-07 c3037"></span><h4>保守運用</h4><p>更新を毎月代行</p></div>
        </div>

CSS

.prev.d05-01-07{background:#f1f2f5}
        .d05-01-07 .wrap05-01-07{display:flex;gap:10px;width:236px}
        .d05-01-07 .mini05-01-07{
          flex:1;background:#fff;border-radius:10px;padding:14px 8px 12px;
          text-align:center;box-shadow:0 4px 10px rgba(20,25,40,.10);
          opacity:0;transform:translateY(24px);
          transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);
        }
        .d05-01-07 .io-reveal.is-in .mini05-01-07{opacity:1;transform:translateY(0)}
        .d05-01-07 .io-reveal.is-in .mini05-01-07:nth-child(1){transition-delay:.05s}
        .d05-01-07 .io-reveal.is-in .mini05-01-07:nth-child(2){transition-delay:.25s}
        .d05-01-07 .io-reveal.is-in .mini05-01-07:nth-child(3){transition-delay:.45s}
        .d05-01-07 .dot05-01-07{
          display:block;width:26px;height:26px;border-radius:50%;margin:0 auto 8px;
        }
        .d05-01-07 .c1037{background:linear-gradient(135deg,#6fc6a0,#3d9b72)}
        .d05-01-07 .c2037{background:linear-gradient(135deg,#7fa8e8,#4b6fc4)}
        .d05-01-07 .c3037{background:linear-gradient(135deg,#eab06a,#d4863a)}
        .d05-01-07 .mini05-01-07 h4{margin:0 0 4px;font-size:11px;color:#222}
        .d05-01-07 .mini05-01-07 p{margin:0;font-size:9px;color:#999;line-height:1.5}

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