Effet de parallaxe HTML avec faisceaux SVG et bruit

Ouvrir dans l'éditeur Video Publiez votre code

Recommandé

4 June 2025

Animation de cœur explosif cliquable

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>

Effet de parallaxe HTML avec faisceaux SVG et bruit

Recommandé

Un code de Mete

Un code par logicalcode2

Animation de cœur explosif cliquable

HTML

CSS

JS

Recommandé

Un code de Mete

Un code par logicalcode2

Animation de cœur explosif cliquable

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS