34 lines
1.2 KiB
JavaScript
34 lines
1.2 KiB
JavaScript
export function enableSpotlightEffect(container) {
|
|
const images = container.querySelectorAll('.hover-spotlight');
|
|
|
|
images.forEach(image => {
|
|
// Crée un overlay lumineux via pseudo ou dataset
|
|
const overlay = document.createElement('div');
|
|
overlay.classList.add('spotlight-overlay');
|
|
image.appendChild(overlay);
|
|
|
|
// Mise à jour dynamique du gradient
|
|
image.addEventListener('mousemove', (e) => {
|
|
const rect = image.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
const intensity = Math.min(rect.width, rect.height) / 400;
|
|
overlay.style.background = `radial-gradient(
|
|
circle at ${x}px ${y}px,
|
|
rgba(255,255,255,${0.1 * intensity}),
|
|
rgba(0,0,0,0.5) 60%
|
|
)`;
|
|
});
|
|
|
|
// Reset progressif quand la souris sort
|
|
image.addEventListener('mouseleave', () => {
|
|
overlay.style.background = `radial-gradient(
|
|
circle at center,
|
|
rgba(255,255,255,0),
|
|
rgba(0,0,0,0.4) 70%
|
|
)`;
|
|
});
|
|
});
|
|
}
|