Efeito Parallax HTML com Raios SVG e Ruído

517 reuel.ferreira

Abrir no Editor Publique Seu Código

Efeito Parallax HTML com Raios SVG e Ruído

Recomendado

27 May 2025

Um Código por alejandrokundrah

29 July 2025

EXEMPLO DE HORÁRIO

HTML

<div class="stage layer-base" id="stage">
  <img class="depth-back asset" src="assets/bg-haunted.jpg" alt="" aria-hidden="true">
  <div class="layer-atmosphere"></div>

<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>

Efeito Parallax HTML com Raios SVG e Ruído

Recomendado

Um Código por alejandrokundrah

Jardim de falhas

EXEMPLO DE HORÁRIO

HTML

CSS

JS

Recomendado

Um Código por alejandrokundrah

Jardim de falhas

EXEMPLO DE HORÁRIO

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS