パーツ番号 01-04-04 ・ CSSのみ

交互配置の特徴(ジグザグ)

グラデーションの図と文章を左右交互に配置。スクロールで画面内に入ると図と文が左右からスライドインします。WordPressの特長紹介LPに最適です。

scrollcss

プレビュー

ソースコード

HTML

<div class="d01-04-04-wrap io-reveal">
          <div class="d01-04-04-row">
            <div class="d01-04-04-fig d01-04-04-fig-a"></div>
            <div class="d01-04-04-txt"><b>柔軟なカスタマイズ</b><p>用途に合わせて自由に設計。</p></div>
          </div>
          <div class="d01-04-04-row d01-04-04-rev">
            <div class="d01-04-04-fig d01-04-04-fig-b"></div>
            <div class="d01-04-04-txt"><b>安心のサポート</b><p>導入後も専任チームが伴走。</p></div>
          </div>
        </div>

CSS

.prev.d01-04-04{background:#f7f9fc}
        .d01-04-04-wrap{width:100%;max-width:440px;display:flex;flex-direction:column;gap:20px}
        .d01-04-04-row{display:flex;align-items:center;gap:16px}
        .d01-04-04-rev{flex-direction:row-reverse}
        .d01-04-04-fig{width:96px;height:70px;border-radius:14px;flex:none}
        .d01-04-04-fig-a{background:linear-gradient(135deg,#5b7cfa,#57c8f0)}
        .d01-04-04-fig-b{background:linear-gradient(135deg,#f0715b,#f0b45b)}
        .d01-04-04-txt b{display:block;font-size:15px;color:#212842;margin-bottom:3px}
        .d01-04-04-txt p{margin:0;font-size:12.5px;color:#6a7288;line-height:1.5}
        .d01-04-04-row .d01-04-04-fig{opacity:0;transform:translateX(-30px);transition:opacity .55s ease,transform .55s ease}
        .d01-04-04-row .d01-04-04-txt{opacity:0;transform:translateX(30px);transition:opacity .55s ease,transform .55s ease}
        .d01-04-04-rev .d01-04-04-fig{transform:translateX(30px)}
        .d01-04-04-rev .d01-04-04-txt{transform:translateX(-30px)}
        .d01-04-04-wrap.is-in .d01-04-04-fig,.d01-04-04-wrap.is-in .d01-04-04-txt{opacity:1;transform:none}
        .d01-04-04-wrap.is-in .d01-04-04-row:nth-child(2) .d01-04-04-fig,.d01-04-04-wrap.is-in .d01-04-04-row:nth-child(2) .d01-04-04-txt{transition-delay:.15s}

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