Effet de parallaxe HTML avec faisceaux SVG et bruit

Ouvrir dans l'éditeur Publiez votre code

Recommandé

6 December 2024

Un code par bachir123

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

Un code par nasmacadic

Un code par bachir123

HTML

CSS

JS

Recommandé

Un code par dynamicarray606

Un code par nasmacadic

Un code par bachir123

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS