timeline slider section

idsachinkumar06762
Mar 16, 2026 7
Live Preview

Live Editor

<div class="tl-bg-grid"></div>
<div class="tl-bg-orb orb1"></div>
<div class="tl-bg-orb orb2"></div>
 
<div class="container-fluid" style="position:relative;z-index:2;">
 
  <!-- Header -->
  <div class="tl-header">
    <div class="label">// chronicle — v2.0.0</div>
    <h1>THE <span>TIME</span>LINE</h1>
    <p class="sub">scroll horizontally &nbsp;·&nbsp; drag to explore &nbsp;·&nbsp; hover for 3d</p>
  </div>
 
  <!-- Scroll Stage -->
  <div class="tl-stage">
    <div class="tl-scroll-wrapper" id="scrollWrapper">
      <div class="tl-track" id="tlTrack">
        <div class="tl-line"></div>
        <div class="tl-scan"></div>
 
        <!-- Item 1 -->
        <div class="tl-item">
          <div class="tl-card">
            <div class="tl-icon">🚀</div>
            <div class="tl-year">1969</div>
            <div class="tl-card-title">Moon Landing</div>
            <div class="tl-card-desc">Apollo 11 carries humanity's first steps onto another world, redefining what is possible.</div>
            <div class="tl-tags">
              <span class="tl-tag">Space</span>
              <span class="tl-tag">NASA</span>
              <span class="tl-tag">History</span>
            </div>
          </div>
          <div class="tl-stem"></div>
          <div class="tl-dot"></div>
        </div>
 
        <!-- Item 2 -->
        <div class="tl-item">
          <div class="tl-dot"></div>
          <div class="tl-stem"></div>
          <div class="tl-card">
            <div class="tl-icon">💾</div>
            <div class="tl-year">1976</div>
            <div class="tl-card-title">Personal Computer Era</div>
            <div class="tl-card-desc">Apple I goes on sale, sparking a revolution that puts computing power into human hands.</div>
            <div class="tl-tags">
              <span class="tl-tag">Tech</span>
              <span class="tl-tag">Apple</span>
            </div>
          </div>
        </div>
 
        <!-- Item 3 -->
        <div class="tl-item">
          <div class="tl-card">
            <div class="tl-icon">🌐</div>
            <div class="tl-year">1991</div>
            <div class="tl-card-title">World Wide Web</div>
            <div class="tl-card-desc">Tim Berners-Lee publishes the first website, connecting the globe with an invisible thread.</div>
            <div class="tl-tags">
              <span class="tl-tag">Internet</span>
              <span class="tl-tag">CERN</span>
              <span class="tl-tag">WWW</span>
            </div>
          </div>
          <div class="tl-stem"></div>
          <div class="tl-dot"></div>
        </div>
 
        <!-- Item 4 -->
        <div class="tl-item">
          <div class="tl-dot"></div>
          <div class="tl-stem"></div>
          <div class="tl-card">
            <div class="tl-icon">🧬</div>
            <div class="tl-year">2003</div>
            <div class="tl-card-title">Human Genome Mapped</div>
            <div class="tl-card-desc">The Human Genome Project completes its map — 3.2 billion base pairs decoded, a new biology born.</div>
            <div class="tl-tags">
              <span class="tl-tag">Science</span>
              <span class="tl-tag">DNA</span>
            </div>
          </div>
        </div>
 
        <!-- Item 5 -->
        <div class="tl-item">
          <div class="tl-card">
            <div class="tl-icon">📱</div>
            <div class="tl-year">2007</div>
            <div class="tl-card-title">iPhone Unveiled</div>
            <div class="tl-card-desc">Steve Jobs introduces a device that collapses phone, iPod, and internet into one glass slab.</div>
            <div class="tl-tags">
              <span class="tl-tag">Mobile</span>
              <span class="tl-tag">Apple</span>
              <span class="tl-tag">UX</span>
            </div>
          </div>
          <div class="tl-stem"></div>
          <div class="tl-dot"></div>
        </div>
 
        <!-- Item 6 -->
        <div class="tl-item">
          <div class="tl-dot"></div>
          <div class="tl-stem"></div>
          <div class="tl-card">
            <div class="tl-icon">⚛️</div>
            <div class="tl-year">2012</div>
            <div class="tl-card-title">Higgs Boson Found</div>
            <div class="tl-card-desc">CERN confirms the Higgs boson, completing the Standard Model and answering how matter has mass.</div>
            <div class="tl-tags">
              <span class="tl-tag">Physics</span>
              <span class="tl-tag">CERN</span>
            </div>
          </div>
        </div>
 
        <!-- Item 7 -->
        <div class="tl-item">
          <div class="tl-card">
            <div class="tl-icon">🤖</div>
            <div class="tl-year">2016</div>
            <div class="tl-card-title">AlphaGo Defeats World Champion</div>
            <div class="tl-card-desc">DeepMind's AI conquers the ancient game of Go, marking a watershed moment for machine intelligence.</div>
            <div class="tl-tags">
              <span class="tl-tag">AI</span>
              <span class="tl-tag">DeepMind</span>
              <span class="tl-tag">ML</span>
            </div>
          </div>
          <div class="tl-stem"></div>
          <div class="tl-dot"></div>
        </div>
 
        <!-- Item 8 -->
        <div class="tl-item">
          <div class="tl-dot"></div>
          <div class="tl-stem"></div>
          <div class="tl-card">
            <div class="tl-icon">🌌</div>
            <div class="tl-year">2019</div>
            <div class="tl-card-title">First Black Hole Image</div>
            <div class="tl-card-desc">Event Horizon Telescope captures humanity's first photograph of a black hole 55 million light-years away.</div>
            <div class="tl-tags">
              <span class="tl-tag">Astronomy</span>
              <span class="tl-tag">EHT</span>
            </div>
          </div>
        </div>
 
        <!-- Item 9 -->
        <div class="tl-item">
          <div class="tl-card">
            <div class="tl-icon">💉</div>
            <div class="tl-year">2021</div>
            <div class="tl-card-title">mRNA Vaccines</div>
            <div class="tl-card-desc">Novel mRNA technology delivers COVID-19 vaccines in record time, reshaping immunology forever.</div>
            <div class="tl-tags">
              <span class="tl-tag">Medicine</span>
              <span class="tl-tag">mRNA</span>
              <span class="tl-tag">COVID</span>
            </div>
          </div>
          <div class="tl-stem"></div>
          <div class="tl-dot"></div>
        </div>
 
        <!-- Item 10 -->
        <div class="tl-item">
          <div class="tl-dot"></div>
          <div class="tl-stem"></div>
          <div class="tl-card">
            <div class="tl-icon">✨</div>
            <div class="tl-year">2024</div>
            <div class="tl-card-title">Generative AI Explosion</div>
            <div class="tl-card-desc">Large language models reshape creativity, productivity, and what it means to be human at the frontier.</div>
            <div class="tl-tags">
              <span class="tl-tag">AI</span>
              <span class="tl-tag">LLM</span>
              <span class="tl-tag">Future</span>
            </div>
          </div>
        </div>
 
      </div><!-- /tl-track -->
    </div><!-- /tl-scroll-wrapper -->
  </div>
 
  <!-- Nav -->
  <div class="tl-nav">
    <button class="tl-nav-btn" id="btnLeft" title="Scroll Left">&#8592;</button>
    <button class="tl-nav-btn" id="btnRight" title="Scroll Right">&#8594;</button>
    <span class="tl-nav-info" id="navInfo">drag · scroll · arrow keys</span>
  </div>
 
</div>
    :root {
      --bg: #060810;
      --track: #0e1220;
      --line: #1a2540;
      --accent: #e8ff47;
      --accent2: #47c8ff;
      --accent3: #ff4778;
      --text: #e8eaf0;
      --muted: #4a5270;
      --card-bg: #0d1222;
      --card-border: #1e2a48;
      --glow-yellow: rgba(232,255,71,0.18);
      --glow-blue: rgba(71,200,255,0.18);
      --glow-red: rgba(255,71,120,0.18);
    }
 
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
    body {
      background: var(--bg);
      color: var(--text);
      font-family: 'Syne', sans-serif;
      overflow-x: hidden;
      min-height: 100vh;
    }
 
    /* ─── Header ─── */
    .tl-header {
      padding: 60px 60px 0;
      position: relative;
      z-index: 10;
    }
    .tl-header .label {
      font-family: 'JetBrains Mono', monospace;
      font-size: .7rem;
      letter-spacing: .25em;
      color: var(--accent);
      text-transform: uppercase;
      margin-bottom: 10px;
    }
    .tl-header h1 {
      font-family: 'Bebas Neue', sans-serif;
      font-size: clamp(3rem, 8vw, 7rem);
      letter-spacing: .04em;
      line-height: 1;
      color: var(--text);
    }
    .tl-header h1 span { color: var(--accent); }
    .tl-header .sub {
      margin-top: 10px;
      font-size: .85rem;
      color: var(--muted);
      font-family: 'JetBrains Mono', monospace;
      letter-spacing: .1em;
    }
 
    /* ─── Scroll Stage ─── */
    .tl-stage {
      position: relative;
      padding: 80px 0 120px;
      perspective: 1200px;
    }
 
    .tl-scroll-wrapper {
      overflow-x: auto;
      overflow-y: visible;
      padding: 40px 60px 60px;
      scrollbar-width: thin;
      scrollbar-color: var(--accent) var(--track);
      cursor: grab;
      user-select: none;
    }
    .tl-scroll-wrapper:active { cursor: grabbing; }
    .tl-scroll-wrapper::-webkit-scrollbar { height: 4px; }
    .tl-scroll-wrapper::-webkit-scrollbar-track { background: var(--track); }
    .tl-scroll-wrapper::-webkit-scrollbar-thumb { background: var(--accent); border-radius: 2px; }
 
    /* ─── Track ─── */
    .tl-track {
      display: flex;
      align-items: center;
      position: relative;
      width: max-content;
      min-width: 100%;
      padding: 160px 0 20px;
    }
 
    /* the horizontal spine line */
    .tl-line {
      position: absolute;
      left: 0; right: 0;
      top: 50%;
      transform: translateY(-50%);
      height: 2px;
      background: linear-gradient(90deg,
        transparent 0%,
        var(--line) 5%,
        var(--accent) 20%,
        var(--accent2) 50%,
        var(--accent3) 80%,
        var(--line) 95%,
        transparent 100%
      );
      filter: drop-shadow(0 0 6px var(--accent));
      pointer-events: none;
    }
 
    /* ─── Items ─── */
    .tl-item {
      position: relative;
      flex-shrink: 0;
      width: 280px;
      margin: 0 30px;
      display: flex;
      flex-direction: column;
      align-items: center;
      opacity: 0;
      transform: translateZ(-80px) translateY(30px);
      transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
    }
    .tl-item.visible {
      opacity: 1;
      transform: translateZ(0) translateY(0);
    }
 
    /* alternating above / below */
    .tl-item:nth-child(odd)  .tl-card { order: -1; margin-bottom: 0; margin-top: 0; }
    .tl-item:nth-child(even) .tl-card { order: 1; }
 
    .tl-item:nth-child(odd)  { flex-direction: column; }
    .tl-item:nth-child(even) { flex-direction: column-reverse; }
 
    /* connector stem */
    .tl-stem {
      width: 2px;
      height: 56px;
      background: linear-gradient(180deg, var(--accent), transparent);
      position: relative;
      flex-shrink: 0;
    }
    .tl-item:nth-child(even) .tl-stem {
      background: linear-gradient(0deg, var(--accent2), transparent);
    }
    .tl-item:nth-child(3n) .tl-stem  { background: linear-gradient(180deg, var(--accent3), transparent); }
    .tl-item:nth-child(3n+1) .tl-stem { background: linear-gradient(180deg, var(--accent), transparent); }
 
    /* dot on the line */
    .tl-dot {
      width: 18px; height: 18px;
      border-radius: 50%;
      background: var(--accent);
      border: 3px solid var(--bg);
      box-shadow: 0 0 0 2px var(--accent), 0 0 18px var(--accent);
      flex-shrink: 0;
      z-index: 2;
      transition: transform .3s ease, box-shadow .3s ease;
    }
    .tl-item:nth-child(even) .tl-dot {
      background: var(--accent2);
      box-shadow: 0 0 0 2px var(--accent2), 0 0 18px var(--accent2);
    }
    .tl-item:nth-child(3n) .tl-dot {
      background: var(--accent3);
      box-shadow: 0 0 0 2px var(--accent3), 0 0 18px var(--accent3);
    }
    .tl-item:hover .tl-dot {
      transform: scale(1.5);
    }
 
    /* ─── Card ─── */
    .tl-card {
      width: 280px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      border-radius: 16px;
      padding: 22px 24px 20px;
      position: relative;
      overflow: hidden;
      transform-style: preserve-3d;
      transform: perspective(600px) rotateX(0deg) rotateY(0deg);
      transition: transform .4s cubic-bezier(.22,1,.36,1), border-color .3s, box-shadow .3s;
      cursor: default;
    }
    .tl-card::before {
      content: '';
      position: absolute;
      inset: 0;
      border-radius: 16px;
      background: radial-gradient(circle at 30% 20%, var(--glow-yellow), transparent 60%);
      opacity: 0;
      transition: opacity .4s;
    }
    .tl-item:nth-child(even) .tl-card::before { background: radial-gradient(circle at 70% 80%, var(--glow-blue), transparent 60%); }
    .tl-item:nth-child(3n)   .tl-card::before { background: radial-gradient(circle at 50% 50%, var(--glow-red), transparent 60%); }
 
    .tl-item:hover .tl-card {
      border-color: var(--accent);
      box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px var(--glow-yellow);
      transform: perspective(600px) rotateX(-4deg) rotateY(4deg) translateY(-8px);
    }
    .tl-item:nth-child(even):hover .tl-card {
      border-color: var(--accent2);
      box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px var(--glow-blue);
      transform: perspective(600px) rotateX(4deg) rotateY(-4deg) translateY(8px);
    }
    .tl-item:nth-child(3n):hover .tl-card {
      border-color: var(--accent3);
      box-shadow: 0 20px 60px rgba(0,0,0,.6), 0 0 40px var(--glow-red);
    }
    .tl-item:hover .tl-card::before { opacity: 1; }
 
    /* card noise texture */
    .tl-card::after {
      content: '';
      position: absolute;
      inset: 0;
      background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
      opacity: .4;
      pointer-events: none;
      border-radius: 16px;
    }
 
    /* year badge */
    .tl-year {
      display: inline-block;
      font-family: 'Bebas Neue', sans-serif;
      font-size: 1.1rem;
      letter-spacing: .15em;
      padding: 3px 10px;
      border-radius: 4px;
      margin-bottom: 10px;
      background: var(--accent);
      color: var(--bg);
    }
    .tl-item:nth-child(even) .tl-year { background: var(--accent2); }
    .tl-item:nth-child(3n)   .tl-year { background: var(--accent3); }
 
    .tl-card-title {
      font-family: 'Syne', sans-serif;
      font-weight: 800;
      font-size: 1.05rem;
      line-height: 1.25;
      margin-bottom: 8px;
      color: var(--text);
    }
    .tl-card-desc {
      font-family: 'JetBrains Mono', monospace;
      font-size: .72rem;
      line-height: 1.6;
      color: var(--muted);
    }
 
    /* tag chips */
    .tl-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 14px; }
    .tl-tag {
      font-family: 'JetBrains Mono', monospace;
      font-size: .6rem;
      letter-spacing: .08em;
      padding: 3px 8px;
      border-radius: 3px;
      border: 1px solid var(--card-border);
      color: var(--muted);
      text-transform: uppercase;
      background: rgba(255,255,255,.02);
    }
 
    /* icon circle */
    .tl-icon {
      width: 38px; height: 38px;
      border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      font-size: 1.2rem;
      margin-bottom: 10px;
      background: rgba(232,255,71,.07);
      border: 1px solid rgba(232,255,71,.15);
    }
    .tl-item:nth-child(even) .tl-icon { background: rgba(71,200,255,.07); border-color: rgba(71,200,255,.15); }
    .tl-item:nth-child(3n)   .tl-icon { background: rgba(255,71,120,.07); border-color: rgba(255,71,120,.15); }
 
    /* ─── Navigation buttons ─── */
    .tl-nav {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 0 60px 40px;
    }
    .tl-nav-btn {
      width: 48px; height: 48px;
      border-radius: 12px;
      background: var(--card-bg);
      border: 1px solid var(--card-border);
      color: var(--text);
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      font-size: 1.1rem;
      transition: all .2s;
    }
    .tl-nav-btn:hover {
      background: var(--accent);
      color: var(--bg);
      border-color: var(--accent);
      transform: scale(1.08);
    }
    .tl-nav-info {
      font-family: 'JetBrains Mono', monospace;
      font-size: .7rem;
      color: var(--muted);
      letter-spacing: .1em;
    }
 
    /* ─── BG grid ─── */
    .tl-bg-grid {
      position: fixed;
      inset: 0;
      pointer-events: none;
      background-image:
        linear-gradient(rgba(30,42,72,.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(30,42,72,.3) 1px, transparent 1px);
      background-size: 60px 60px;
      z-index: 0;
    }
    .tl-bg-orb {
      position: fixed;
      border-radius: 50%;
      filter: blur(100px);
      pointer-events: none;
      z-index: 0;
    }
    .orb1 { width: 600px; height: 600px; background: rgba(232,255,71,.04); top: -200px; left: -200px; animation: orbFloat1 12s ease-in-out infinite; }
    .orb2 { width: 500px; height: 500px; background: rgba(71,200,255,.05); bottom: -150px; right: -100px; animation: orbFloat2 15s ease-in-out infinite; }
 
    @keyframes orbFloat1 {
      0%,100% { transform: translate(0,0); }
      50% { transform: translate(60px, 40px); }
    }
    @keyframes orbFloat2 {
      0%,100% { transform: translate(0,0); }
      50% { transform: translate(-40px, -60px); }
    }
 
    /* ─── Transition delays ─── */
    .tl-item:nth-child(1)  { transition-delay: .05s; }
    .tl-item:nth-child(2)  { transition-delay: .12s; }
    .tl-item:nth-child(3)  { transition-delay: .19s; }
    .tl-item:nth-child(4)  { transition-delay: .26s; }
    .tl-item:nth-child(5)  { transition-delay: .33s; }
    .tl-item:nth-child(6)  { transition-delay: .40s; }
    .tl-item:nth-child(7)  { transition-delay: .47s; }
    .tl-item:nth-child(8)  { transition-delay: .54s; }
    .tl-item:nth-child(9)  { transition-delay: .61s; }
    .tl-item:nth-child(10) { transition-delay: .68s; }
 
    /* ─── Scan line pulse on spine ─── */
    .tl-scan {
      position: absolute;
      left: 0; top: 50%;
      transform: translateY(-50%);
      width: 4px; height: 40px;
      border-radius: 2px;
      background: white;
      opacity: .6;
      filter: blur(2px);
      animation: scanMove 4s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes scanMove {
      0%   { left: 0%; opacity: 0; }
      10%  { opacity: .6; }
      90%  { opacity: .6; }
      100% { left: 100%; opacity: 0; }
    }
 
    /* ─── Responsive ─── */
    @media (max-width: 768px) {
      .tl-header { padding: 40px 24px 0; }
      .tl-scroll-wrapper { padding: 20px 24px 40px; }
      .tl-nav { padding: 0 24px 30px; }
    }
  // ── Animate items into view via IntersectionObserver on scroll wrapper ──
  const track   = document.getElementById('tlTrack');
  const wrapper = document.getElementById('scrollWrapper');
  const items   = document.querySelectorAll('.tl-item');
 
  // Initial trigger — show items that are already visible
  function checkVisible() {
    const wRect = wrapper.getBoundingClientRect();
    items.forEach(item => {
      const iRect = item.getBoundingClientRect();
      if (iRect.left < wRect.right + 60 && iRect.right > wRect.left - 60) {
        item.classList.add('visible');
      }
    });
  }
  setTimeout(checkVisible, 100);
  wrapper.addEventListener('scroll', checkVisible);
 
  // ── Drag to scroll ──
  let isDown = false, startX, scrollLeft;
  wrapper.addEventListener('mousedown', e => {
    isDown = true;
    startX = e.pageX - wrapper.offsetLeft;
    scrollLeft = wrapper.scrollLeft;
  });
  document.addEventListener('mouseup',   () => isDown = false);
  document.addEventListener('mouseleave',() => isDown = false);
  wrapper.addEventListener('mousemove', e => {
    if (!isDown) return;
    e.preventDefault();
    const x    = e.pageX - wrapper.offsetLeft;
    const walk = (x - startX) * 1.4;
    wrapper.scrollLeft = scrollLeft - walk;
  });
 
  // ── Arrow buttons ──
  const btnLeft  = document.getElementById('btnLeft');
  const btnRight = document.getElementById('btnRight');
  const STEP = 320;
  btnLeft .addEventListener('click', () => wrapper.scrollBy({ left: -STEP, behavior: 'smooth' }));
  btnRight.addEventListener('click', () => wrapper.scrollBy({ left:  STEP, behavior: 'smooth' }));
 
  // ── Keyboard ──
  document.addEventListener('keydown', e => {
    if (e.key === 'ArrowLeft')  wrapper.scrollBy({ left: -STEP, behavior: 'smooth' });
    if (e.key === 'ArrowRight') wrapper.scrollBy({ left:  STEP, behavior: 'smooth' });
  });
 
  // ── 3D mouse-tilt on cards ──
  document.querySelectorAll('.tl-card').forEach(card => {
    card.addEventListener('mousemove', e => {
      const rect = card.getBoundingClientRect();
      const cx = rect.left + rect.width  / 2;
      const cy = rect.top  + rect.height / 2;
      const dx = (e.clientX - cx) / (rect.width  / 2);
      const dy = (e.clientY - cy) / (rect.height / 2);
      const item = card.closest('.tl-item');
      const isEven = [...items].indexOf(item) % 2 === 1;
      card.style.transform = `perspective(600px) rotateY(${dx * 10}deg) rotateX(${-dy * 8}deg) translateZ(12px)`;
    });
    card.addEventListener('mouseleave', () => {
      card.style.transform = '';
    });
  });
 
  // ── Nav info update ──
  wrapper.addEventListener('scroll', () => {
    const pct = Math.round((wrapper.scrollLeft / (wrapper.scrollWidth - wrapper.clientWidth)) * 100) || 0;
    document.getElementById('navInfo').textContent = `progress: ${pct}%`;
  });
Categories

timeline slider section

Live Preview

Live Editor

Comments 0

Want to comment?

No comments yet

AI Code Assistant
