TESTA DIN HEMSIDA

Hur uppfattas ditt företag online?
Låt vår AI kolla.

Din hemsida är ofta det första intrycket av ditt företag. Vad signalerar den om ditt varumärke, dina erbjudanden och din målgrupp? Få en kostnadsfri analys direkt.

  • Målgrupp

  • Persona

  • Lämpliga kanalval

  • Rekommendationer

Gratis rapport på 30 sekunder!

document.addEventListener("DOMContentLoaded", function () { const gradientHover = document.querySelector(".gradient-hover");if (!gradientHover) return;// Select only the direct .fusion-column-wrapper inside .gradient-hover const columnWrapper = gradientHover.querySelector(":scope > .fusion-column-wrapper");if (!columnWrapper) return;let isVisible = false;// Observe visibility of .gradient-hover const observer = new IntersectionObserver( (entries) => { isVisible = entries[0].isIntersecting; }, { threshold: 0.1 } ); observer.observe(gradientHover);// Change this value to control smoothness (0.1 - 0.9 = slow to fast movement, 0 = instant movement, 1 = no movement) let transitionSmoothness = 0.4;let remappedSmoothness = transitionSmoothness * (0.08 / 0.5);// Set up initial and target positions let targetXPrimary = 50, targetYPrimary = 50; let targetXSecondary = 95, targetYSecondary = 95; let currentXPrimary = 50, currentYPrimary = 50; let currentXSecondary = 95, currentYSecondary = 95;// Track time to limit updates let lastUpdateTime = performance.now(); const updateInterval = 16; // 16ms ~ 60FPSdocument.addEventListener("mousemove", function (event) { if (!isVisible) return;const viewportWidth = window.innerWidth; const viewportHeight = window.innerHeight; const rect = gradientHover.getBoundingClientRect();// Find the center of the viewport const centerXViewport = viewportWidth / 2; const centerYViewport = viewportHeight / 2;// Find the center of .fusion-column-wrapper const centerXElement = rect.left + rect.width / 2; const centerYElement = rect.top + rect.height / 2;// Calculate how far the mouse is from the center of the viewport (-1 to 1 range) const xDelta = (event.clientX - centerXViewport) / centerXViewport; const yDelta = (event.clientY - centerYViewport) / centerYViewport;// Set new target positions for the gradients targetXPrimary = 50 + (xDelta * 50); targetYPrimary = 50 + (yDelta * 50); targetXSecondary = 95 + (xDelta * 10); targetYSecondary = 95 + (yDelta * 10); });function updateGradients(currentTime) { if (currentTime - lastUpdateTime < updateInterval) { requestAnimationFrame(updateGradients); return; } lastUpdateTime = currentTime;// Compute distance to target positions let distancePrimary = Math.hypot(targetXPrimary - currentXPrimary, targetYPrimary - currentYPrimary); let distanceSecondary = Math.hypot(targetXSecondary - currentXSecondary, targetYSecondary - currentYSecondary);// Calculate smoothing factor based on distance (closer = slower, farther = faster) let smoothingFactorPrimary = transitionSmoothness === 0 ? 1 : Math.min(0.2, distancePrimary * remappedSmoothness * 0.02); let smoothingFactorSecondary = transitionSmoothness === 0 ? 1 : Math.min(0.2, distanceSecondary * remappedSmoothness * 0.02);// Gradually interpolate (lerp) towards the target positions based on smoothness currentXPrimary += (targetXPrimary - currentXPrimary) * smoothingFactorPrimary; currentYPrimary += (targetYPrimary - currentYPrimary) * smoothingFactorPrimary; currentXSecondary += (targetXSecondary - currentXSecondary) * smoothingFactorSecondary; currentYSecondary += (targetYSecondary - currentYSecondary) * smoothingFactorSecondary;// Apply the new smoothly updated positions columnWrapper.style.setProperty("--primary-gradient-position", `${currentXPrimary}% ${currentYPrimary}%`); columnWrapper.style.setProperty("--secondary-gradient-position", `${currentXSecondary}% ${currentYSecondary}%`);// Continuously update requestAnimationFrame(updateGradients); }// Start the animation loop requestAnimationFrame(updateGradients); });