パーツ番号 05-03-03 ・ CSSのみ
交互配置タイムライン
左右交互にカードが並び、表示時に左右からスライドインします。WordPressの実績ストーリーや制作工程の紹介に効果的です。
プレビュー
ソースコード
HTML
<div class="d05-03-03-tl">
<div class="d05-03-03-row d05-03-03-l"><div class="d05-03-03-card"><b>お問い合わせ</b>ご相談を受付</div></div>
<div class="d05-03-03-row d05-03-03-r"><div class="d05-03-03-card"><b>ヒアリング</b>要件を整理</div></div>
<div class="d05-03-03-row d05-03-03-l"><div class="d05-03-03-card"><b>制作</b>デザイン実装</div></div>
<div class="d05-03-03-row d05-03-03-r"><div class="d05-03-03-card"><b>納品</b>公開・運用</div></div>
</div>CSS
.d05-03-03-tl{position:relative;width:100%;max-width:340px}
.d05-03-03-tl::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:2px;background:#dbe3f0;transform:translateX(-50%)}
.d05-03-03-row{position:relative;display:flex;margin-bottom:14px}
.d05-03-03-row:last-child{margin-bottom:0}
.d05-03-03-l{justify-content:flex-start}
.d05-03-03-r{justify-content:flex-end}
.d05-03-03-card{width:45%;background:#fff;border:1px solid #e6ebf3;border-radius:8px;padding:8px 10px;font-size:11px;color:#64748b;box-shadow:0 3px 10px rgba(30,50,90,.06);opacity:0;transition:.6s ease}
.d05-03-03-card b{display:block;color:#1e293b;font-size:13px;margin-bottom:2px}
.d05-03-03-l .d05-03-03-card{transform:translateX(-30px)}
.d05-03-03-r .d05-03-03-card{transform:translateX(30px)}
.d05-03-03.is-in .d05-03-03-card{opacity:1;transform:translateX(0)}
.d05-03-03.is-in .d05-03-03-row:nth-child(2) .d05-03-03-card{transition-delay:.15s}
.d05-03-03.is-in .d05-03-03-row:nth-child(3) .d05-03-03-card{transition-delay:.3s}
.d05-03-03.is-in .d05-03-03-row:nth-child(4) .d05-03-03-card{transition-delay:.45s}クラス名 .d05-03-03 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。