37 lines
1.5 KiB
JavaScript
37 lines
1.5 KiB
JavaScript
export default function enableLensEffect(container) {
|
|
container
|
|
.querySelectorAll('.hover-lens')
|
|
.forEach(link => {
|
|
const img = link.querySelector('img');
|
|
if (!img) return;
|
|
|
|
link.addEventListener('mousemove', e => {
|
|
const rect = link.getBoundingClientRect();
|
|
const x = e.clientX - rect.left;
|
|
const y = e.clientY - rect.top;
|
|
|
|
link.style.setProperty('--lens-x', `${x}px`);
|
|
link.style.setProperty('--lens-y', `${y}px`);
|
|
link.style.setProperty('--lens-bg', `url(${img.src})`);
|
|
link.style.setProperty(
|
|
'--lens-pos',
|
|
`${(x / rect.width) * 100}% ${(y / rect.height) * 100}%`
|
|
);
|
|
link.style.backgroundImage = `url(${img.src})`;
|
|
});
|
|
|
|
link.addEventListener('mouseenter', () => {
|
|
const rect = link.getBoundingClientRect();
|
|
link.style.setProperty('--lens-bg', `url(${img.src})`);
|
|
link.style.setProperty('--lens-pos', `center center`);
|
|
link.style.setProperty('--lens-x', `${rect.width / 2}px`);
|
|
link.style.setProperty('--lens-y', `${rect.height / 2}px`);
|
|
link.classList.add('active');
|
|
});
|
|
|
|
link.addEventListener('mouseleave', () => {
|
|
link.classList.remove('active');
|
|
link.style.removeProperty('background-image');
|
|
});
|
|
});
|
|
} |