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

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

タイムライン線描画

画面に入ると縦線が上から伸び、ドットと項目が順に点灯するタイムライン。WordPressの会社沿革ページやイベントスケジュールにぴったりです。

scrollcss

プレビュー

ソースコード

HTML

<div class="tl08-01-10 io-reveal">
          <span class="line08-01-10"></span>
          <div class="ev08-01-10"><i></i><div><b>2019</b><p>会社設立</p></div></div>
          <div class="ev08-01-10"><i></i><div><b>2022</b><p>制作実績500件を突破</p></div></div>
          <div class="ev08-01-10"><i></i><div><b>2026</b><p>新サービスをリリース</p></div></div>
        </div>

CSS

.d08-01-10{background:#fafaf9;}
        .d08-01-10 .tl08-01-10{position:relative;width:100%;max-width:280px;padding-left:26px;}
        .d08-01-10 .line08-01-10{
          position:absolute;left:7px;top:6px;bottom:6px;width:3px;border-radius:2px;
          background:linear-gradient(180deg,#f43f5e,#fb923c);
          transform:scaleY(0);transform-origin:top;
          transition:transform 1.1s cubic-bezier(.4,0,.2,1);
        }
        .d08-01-10 .tl08-01-10.is-in .line08-01-10{transform:scaleY(1);}
        .d08-01-10 .ev08-01-10{position:relative;display:flex;gap:12px;padding:9px 0;}
        .d08-01-10 .ev08-01-10 i{
          position:absolute;left:-26px;top:14px;width:13px;height:13px;border-radius:50%;
          background:#e7e5e4;border:3px solid #fafaf9;box-shadow:0 0 0 1px #d6d3d1;
          transition:background .4s ease,box-shadow .4s ease,transform .4s ease;
        }
        .d08-01-10 .ev08-01-10 b{font-size:12px;color:#f43f5e;letter-spacing:.05em;}
        .d08-01-10 .ev08-01-10 p{margin:2px 0 0;font-size:12.5px;color:#44403c;line-height:1.6;}
        .d08-01-10 .ev08-01-10 div{
          opacity:0;transform:translateX(14px);
          transition:opacity .5s ease,transform .5s ease;
        }
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10 i{
          background:#f43f5e;box-shadow:0 0 0 4px rgba(244,63,94,.18);transform:scale(1.1);
        }
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10 div{opacity:1;transform:translateX(0);}
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10:nth-of-type(1) i,
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10:nth-of-type(1) div{transition-delay:.25s;}
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10:nth-of-type(2) i,
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10:nth-of-type(2) div{transition-delay:.6s;}
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10:nth-of-type(3) i,
        .d08-01-10 .tl08-01-10.is-in .ev08-01-10:nth-of-type(3) div{transition-delay:.95s;}

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