Effet de parallaxe HTML avec faisceaux SVG et bruit

1,074 reuel.ferreira

Ouvrir dans l'éditeur Publiez votre code

Effet de parallaxe HTML avec faisceaux SVG et bruit

Recommandé

10 June 2025

Un code par alejandrokundrah

3 December 2025

Documentation de l'API de contenu Web v1

14 June 2024

Effet de carte Flips 3D

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>

CSS