const container = document.getElementById("background-canvas"); const trigger = document.getElementById("trigger"); const dotRadius = 1.5; const bgColor = "#1F2430"; let svg, stop2, stop3; let animating = false; let startTime = null; const duration = 500; let resizeTimeout; /* ===== CREATE SVG ===== */ function createSVG() { container.innerHTML = ""; const width = container.clientWidth; const height = container.clientHeight; const svgNS = "http://www.w3.org/2000/svg"; svg = document.createElementNS(svgNS, "svg"); svg.setAttribute("viewBox", `0 0 ${width} ${height}`); svg.setAttribute("preserveAspectRatio", "none"); svg.innerHTML = ` ${generateDots(width, height)} `; container.appendChild(svg); stop2 = svg.querySelector("#stop2"); stop3 = svg.querySelector("#stop3"); } /* ===== GENERATE DOTS ===== */ function generateDots(width, height) { // Nombre de points sur la largeur let numPoints; if (width `; } } return dots; } /* ===== ANIMATION ===== */ function easeOut(t) { return 1 - Math.pow(1 - t, 3); } function animateOffsets(timestamp) { if (!startTime) startTime = timestamp; const progress = Math.min((timestamp - startTime) / duration, 1); const eased = easeOut(progress); const o2 = 5 + (25 - 5) * eased; const o3 = 95 + (75 - 95) * eased; stop2.setAttribute("offset", `${o2}%`); stop3.setAttribute("offset", `${o3}%`); if (progress { if (!svg) return; if (entry.isIntersecting && !animating) { animating = true; startTime = null; requestAnimationFrame(animateOffsets); } if (!entry.isIntersecting) { stop2.setAttribute("offset", "5%"); stop3.setAttribute("offset", "95%"); animating = false; startTime = null; } }, { threshold: 0 }); observer.observe(trigger); /* ===== RESPONSIVE ===== */ window.addEventListener("resize", () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { createSVG(); const rect = trigger.getBoundingClientRect(); if (rect.bottom > 0 && rect.top 0 && rect.top < window.innerHeight && !animating) { animating = true; startTime = null; requestAnimationFrame(animateOffsets); }