パーツ番号 09-05-06 ・ JavaScript使用

導入実績ロゴウォール

導入企業名(ダミー)を格子状に並べ、画面内に入るとふわっと表示する。「多くの企業に選ばれている」実績を印象づける。

scrolljs

プレビュー

ソースコード

HTML

<div class="d09-05-06-wall io-reveal">
          <span class="d09-05-06-cell">ROBOTEC</span>
          <span class="d09-05-06-cell">Greenfield</span>
          <span class="d09-05-06-cell">NOVA Lab</span>
          <span class="d09-05-06-cell">Studio Ori</span>
          <span class="d09-05-06-cell">Blue Harbor</span>
          <span class="d09-05-06-cell">Kinetic Co.</span>
        </div>

CSS

.d09-05-06-wall{
          display:grid; grid-template-columns:repeat(3, 1fr); gap:10px; width:100%;
        }
        .d09-05-06-cell{
          background:#fff; border:1px solid #e4e7ec; border-radius:8px;
          padding:14px 6px; text-align:center; font-size:11.5px; font-weight:700; color:#556070;
          opacity:0; transform:translateY(14px);
          transition:opacity .5s ease, transform .5s ease;
        }
        .d09-05-06-wall.is-in .d09-05-06-cell{ opacity:1; transform:translateY(0); }
        .d09-05-06-cell:nth-child(1){ transition-delay:.02s; }
        .d09-05-06-cell:nth-child(2){ transition-delay:.10s; }
        .d09-05-06-cell:nth-child(3){ transition-delay:.18s; }
        .d09-05-06-cell:nth-child(4){ transition-delay:.26s; }
        .d09-05-06-cell:nth-child(5){ transition-delay:.34s; }
        .d09-05-06-cell:nth-child(6){ transition-delay:.42s; }

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