KHUSHANA
KHUSHANA
Makeup Studio
Artistry • Elegance • Beauty
Enter Studio
Khushana Digital
Design • Dev • Strategy
Explore Services
const cards = document.querySelectorAll('.split'); cards.forEach(card => { card.addEventListener('mousemove', (e) => { const rect = card.getBoundingClientRect(); // Calculate mouse position relative to the center of the card const x = e.clientX - rect.left; const y = e.clientY - rect.top; const centerX = rect.width / 2; const centerY = rect.height / 2; // Degree of tilt (adjust '10' to make it more or less dramatic) const rotateX = (centerY - y) / 15; const rotateY = (x - centerX) / 15; card.style.transform = `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`; }); // Reset position when mouse leaves card.addEventListener('mouseleave', () => { card.style.transform = `rotateX(0deg) rotateY(0deg)`; }); }); const studioSide = document.querySelector('.left'); studioSide.addEventListener('mousemove', (e) => { createSparkle(e.clientX, e.clientY); }); function createSparkle(x, y) { const sparkle = document.createElement('div'); sparkle.className = 'sparkle'; // Center the sparkle on the cursor sparkle.style.left = (x - 3) + 'px'; sparkle.style.top = (y - 3) + 'px'; // Add a slight random offset for a organic feel const randomX = (Math.random() - 0.5) * 15; const randomY = (Math.random() - 0.5) * 15; sparkle.style.marginLeft = randomX + 'px'; sparkle.style.marginTop = randomY + 'px'; document.body.appendChild(sparkle); // Remove element after animation ends to keep DOM clean setTimeout(() => { sparkle.remove(); }, 800); }