パーツ番号 08-01-03 ・ CSSのみ

左右交互スライドイン

項目が左右から交互に滑り込むリビール。WordPressの実績紹介や交互配置の画像＋テキストセクションと相性が良い動きです。

css

プレビュー

ソースコード

HTML

<div class="rows08-01-03 io-reveal">
          <div class="row08-01-03 l08-01-03"><span class="dot08-01-03"></span>左からスライドイン</div>
          <div class="row08-01-03 r08-01-03"><span class="dot08-01-03"></span>右からスライドイン</div>
          <div class="row08-01-03 l08-01-03"><span class="dot08-01-03"></span>また左から登場</div>
          <div class="row08-01-03 r08-01-03"><span class="dot08-01-03"></span>また右から登場</div>
        </div>

CSS

.d08-01-03{background:#fdf6ee;}
        .d08-01-03 .rows08-01-03{display:flex;flex-direction:column;gap:10px;width:100%;max-width:300px;}
        .d08-01-03 .row08-01-03{
          display:flex;align-items:center;gap:10px;padding:11px 16px;
          background:#fff;border-radius:999px;font-size:13px;color:#44403c;
          box-shadow:0 4px 14px rgba(120,80,40,.1);
          opacity:0;transition:opacity .6s ease,transform .6s cubic-bezier(.22,.9,.3,1);
        }
        .d08-01-03 .l08-01-03{transform:translateX(-46px);align-self:flex-start;}
        .d08-01-03 .r08-01-03{transform:translateX(46px);align-self:flex-end;}
        .d08-01-03 .dot08-01-03{width:10px;height:10px;border-radius:50%;background:#f59e0b;flex:none;}
        .d08-01-03 .row08-01-03:nth-child(even) .dot08-01-03{background:#f97316;}
        .d08-01-03 .rows08-01-03.is-in .row08-01-03{opacity:1;transform:translateX(0);}
        .d08-01-03 .rows08-01-03.is-in .row08-01-03:nth-child(2){transition-delay:.15s;}
        .d08-01-03 .rows08-01-03.is-in .row08-01-03:nth-child(3){transition-delay:.3s;}
        .d08-01-03 .rows08-01-03.is-in .row08-01-03:nth-child(4){transition-delay:.45s;}

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