HTML Parallax Effect with SVG Beams and Noise

1,260 reuel.ferreira

<svg class="volumetric-svg" viewBox="0 0 1920 1080" preserveAspectRatio="xMidYMid slice" aria-hidden="true">
    <defs>
      <linearGradient id="gBeam" x1="0" x2="1">
        <stop offset="0%" stop-color="rgba(0,255,100,0.85)"/>
        <stop offset="40%" stop-color="rgba(0,255,100,0.25)"/>
        <stop offset="100%" stop-color="rgba(0,255,100,0)"/>
      </linearGradient>
      <mask id="mBeam">
        <rect width="100%" height="100%" fill="black"/>
        <g id="beams" fill="url(#gBeam)" style="mix-blend-mode:screen;"/>
      </mask>
    </defs>
    <g mask="url(#mBeam)" class="beam-group">
      <rect x="-20%" y="-10%" width="40%" height="120%" transform="skewX(-20) scale(1.2,1)" />
      <rect x="40%" y="-10%" width="30%" height="120%" transform="skewX(-12) scale(1.05,1)" />
    </g>
  </svg>

<img class="depth-front asset neon three-point" src="assets/ghost-3d.png" alt="">

<svg class="frame" viewBox="0 0 1200 1200" aria-hidden="true">
    <rect x="40" y="40" width="1120" height="1120" fill="none" stroke="url(#frameGrad)" stroke-width="6"
          stroke-dasharray="16 12" class="neon-line"/>
    <defs>
      <linearGradient id="frameGrad"><stop offset="0" stop-color="#00ff64"/><stop offset="1" stop-color="#7cff9a"/></linearGradient>
    </defs>
  </svg>

<div class="copy">
    <h1 class="headline text-neon">UMA PROMO ASSOMBROSA</h1>
    <p class="sub text-muted">Leia a legenda — oferta limitada.</p>
  </div>

<canvas id="noise" class="noise-layer" aria-hidden="true"></canvas>
</div>

// parallax mouse
  if (!prefersReduced) {
    document.addEventListener('mousemove', e => {
      const cx = e.clientX / window.innerWidth - 0.5;
      const cy = e.clientY / window.innerHeight - 0.5;
      const t = `translate3d(${cx*8}px, ${cy*6}px, 0)`;
      front.style.transform = `translate3d(${cx*18}px, ${cy*12}px, 0) scale(1.01)`;
      mid.style.transform = `translate3d(${cx*10}px, ${cy*7}px, 0)`;
      back.style.transform = `translate3d(${cx*4}px, ${cy*2}px, 0)`;
    });
  }

// canvas noise
  function resize() {
    noise.width = innerWidth;
    noise.height = innerHeight;
    noise.style.width = innerWidth + 'px';
    noise.style.height = innerHeight + 'px';
  }
  window.addEventListener('resize', resize);
  resize();
  const ctx = noise.getContext('2d');

function frame() {
    const w = noise.width, h = noise.height;
    const img = ctx.createImageData(w, h);
    const d = img.data;
    for (let i = 0; i < d.length; i += 4) {
      const v = (Math.random() * 40) | 0; // subtle grain
      d[i] = d[i+1] = d[i+2] = 0;
      d[i+3] = v; // alpha channel only -> overlay effect
    }
    ctx.putImageData(img, 0, 0);
    requestAnimationFrame(frame);
  }
  frame();
})();
</script>

CSS

HTML Parallax Effect with SVG Beams and Noise

Recommended