Scroll Stock Candlestick Crash — Free HTML CSS JS Snippet

<div class="hint">Scroll ↓ to watch the session play out</div>
<section class="terminal-stage">
  <div class="terminal">
    <div class="ticker">
      <span class="sym">FWD</span>
      <span class="price" id="price">100.00</span>
      <span class="pct" id="pct">+0.00%</span>
    </div>
    <svg viewBox="0 0 480 220" class="chart">
      <g class="gridlines">
        <line x1="0" y1="40" x2="480" y2="40" /><line x1="0" y1="90" x2="480" y2="90" />
        <line x1="0" y1="140" x2="480" y2="140" /><line x1="0" y1="190" x2="480" y2="190" />
      </g>
      <polyline id="trendLine" class="trend" points="" />
      <g id="candles"></g>
    </svg>
  </div>
</section>
<div class="spacer"></div>

* { box-sizing: border-box; }
body { margin: 0; font-family: 'Courier New', monospace; background: #05070a; color: #d6ffe0; }
.hint { position: sticky; top: 12px; text-align: center; font-size: 13px; letter-spacing: 0.06em; color: #4dff9e; z-index: 5; padding: 10px; }
.terminal-stage { height: 100vh; display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at 50% 35%, #0a1410 0%, #04070a 75%); }
.spacer { height: 220vh; }

.terminal { width: min(92vw, 640px); background: #060b09; border: 1px solid #123322; border-radius: 8px; padding: 18px; box-shadow: 0 0 40px rgba(77,255,158,0.08); }
.ticker { display: flex; align-items: baseline; gap: 14px; margin-bottom: 14px; }
.sym { font-size: 15px; font-weight: 700; color: #7d8a90; letter-spacing: 0.06em; }
.price { font-size: 26px; font-weight: 700; color: #4dff9e; }
.pct { font-size: 15px; color: #4dff9e; }
.pct.down { color: #ff4d6a; }

.chart { width: 100%; height: auto; background: #04080a; border-radius: 4px; }
.gridlines line { stroke: #0e2018; stroke-width: 1; }
.trend { fill: none; stroke: #4dd4ff; stroke-width: 1.5; opacity: 0.6; }
.candle-wick { stroke-width: 1.5; }
.candle-body { }
.up .candle-wick, .up .candle-body { stroke: #4dff9e; fill: #4dff9e; }
.down .candle-wick, .down .candle-body { stroke: #ff4d6a; fill: #ff4d6a; }

gsap.registerPlugin(ScrollTrigger);

var candlesGroup = document.getElementById('candles');
var trendLine = document.getElementById('trendLine');
var priceEl = document.getElementById('price');
var pctEl = document.getElementById('pct');

var data = [
  { o: 100, c: 106, h: 108, l: 99 },
  { o: 106, c: 112, h: 115, l: 104 },
  { o: 112, c: 110, h: 116, l: 108 },
  { o: 110, c: 118, h: 120, l: 109 },
  { o: 118, c: 126, h: 129, l: 116 },
  { o: 126, c: 122, h: 130, l: 120 },
  { o: 122, c: 131, h: 134, l: 121 },
  { o: 131, c: 124, h: 133, l: 118 },
  { o: 124, c: 108, h: 126, l: 104 },
  { o: 108, c: 86, h: 110, l: 80 },
  { o: 86, c: 68, h: 90, l: 60 },
  { o: 68, c: 72, h: 78, l: 62 },
];

var minP = 55, maxP = 138;
var chartW = 480, chartH = 220;
var candleW = chartW / data.length;

function y(price) { return chartH - ((price - minP) / (maxP - minP)) * chartH; }

var trendPts = [];
data.forEach(function (d, i) {
  var cx = i * candleW + candleW / 2;
  var up = d.c >= d.o;
  var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  g.setAttribute('class', up ? 'up' : 'down');
  g.style.opacity = 0;

  var wick = document.createElementNS('http://www.w3.org/2000/svg', 'line');
  wick.setAttribute('class', 'candle-wick');
  wick.setAttribute('x1', cx); wick.setAttribute('x2', cx);
  wick.setAttribute('y1', y(d.h)); wick.setAttribute('y2', y(d.l));
  g.appendChild(wick);

  var bodyTop = y(Math.max(d.o, d.c));
  var bodyH = Math.max(2, Math.abs(y(d.o) - y(d.c)));
  var body = document.createElementNS('http://www.w3.org/2000/svg', 'rect');
  body.setAttribute('class', 'candle-body');
  body.setAttribute('x', cx - candleW * 0.3);
  body.setAttribute('width', candleW * 0.6);
  body.setAttribute('y', bodyTop);
  body.setAttribute('height', 0);
  body.dataset.finalH = bodyH;
  body.dataset.finalY = bodyTop;
  g.appendChild(body);

  candlesGroup.appendChild(g);
  trendPts.push(cx + ',' + y(d.c));
});

var tl = gsap.timeline({
  scrollTrigger: {
    trigger: '.terminal-stage',
    start: 'top top',
    end: '+=240%',
    scrub: 0.4,
    pin: true,
  },
});

var bodies = candlesGroup.querySelectorAll('.candle-body');
var groups = candlesGroup.querySelectorAll('g');

data.forEach(function (d, i) {
  var pos = i * 0.08;
  var body = bodies[i];
  var group = groups[i];
  tl.to(group, { opacity: 1, duration: 0.05 }, pos)
    .to(body, {
      height: parseFloat(body.dataset.finalH),
      y: parseFloat(body.dataset.finalY),
      duration: 0.06,
      ease: 'power1.out',
    }, pos);

  tl.add(function () {
    var up = d.c >= d.o;
    var startPrice = data[0].o;
    var change = (((d.c - startPrice) / startPrice) * 100).toFixed(2);
    priceEl.textContent = d.c.toFixed(2);
    pctEl.textContent = (change >= 0 ? '+' : '') + change + '%';
    pctEl.classList.toggle('down', d.c < startPrice);
  }, pos);
});

var trendDraw = { n: 0 };
tl.to(trendDraw, {
  n: data.length - 1,
  ease: 'none',
  duration: data.length * 0.08,
  onUpdate: function () {
    var count = Math.max(1, Math.ceil(trendDraw.n) + 1);
    trendLine.setAttribute('points', trendPts.slice(0, count).join(' '));
  },
}, 0);