Перелистывание изображений

<!--Перелистывание изображений-->
<!--https://mt-webdesign.ru/img-hover-->
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<div class="preview">
<div class="preview-img"></div>
</div>
<style>
:root {
--ImgWidthSlide: 480px; /*Ширина контейнера под изображение*/
--ImgHeightSlide: 280px; /*Высота контейнера под изображение*/
--ImgIndexSlide: 999; /*Расположение изображения, чем выше значение, тем ближе положение его*/
--ImgBGSlide: url('https://static.tildacdn.com/tild6265-6538-4833-b937-326465363035/Group_3336.jpg'); /*Путь до изображения*/
}
.t-body {
overflow-x: hidden;
}
.preview {
position: absolute;
width: var(--ImgWidthSlide);
height: var(--ImgHeightSlide);
overflow: hidden;
pointer-events: none;
transform-origin: center;
transform: scale(0);
z-index: var(--ImgIndexSlide);
}
.preview-img {
width: 100%;
height: 100%;
background-image: var(--ImgBGSlide);
background-size: cover;
background-position: 0 0;
pointer-events: none;
}
.project {
cursor: pointer;
}
@media only screen and (max-width: 1400px) {
.preview {
display: none;
}
}
</style>
<script>
const selectors = ['.previmg1', '.previmg2', '.previmg3', '.previmg4', '.previmg5'];
const targetNode = document.body;
function hasZoom(el) {
return el && el.style && el.style.zoom !== '' && el.style.zoom !== undefined;
}
const observer = new MutationObserver(() => {
const elements = selectors.map(sel => document.querySelector(sel)).filter(Boolean);
if (elements.length === selectors.length) {
observer.disconnect();
watchZoom(elements);
}
});
function watchZoom(elements) {
const zoomObserver = new MutationObserver(() => {
const allZoomed = elements.every(el => hasZoom(el));
if (allZoomed) {
zoomObserver.disconnect();
elements.forEach((el, i) => {
el.classList.add('project');
el.setAttribute('data-p', `p${i + 1}`);
});
$(elements).wrapAll('<div class="projects"></div>');
initAnimation();
}
});
elements.forEach(el => {
zoomObserver.observe(el, { attributes: true, attributeFilter: ['style'] });
});
}
observer.observe(targetNode, { childList: true, subtree: true });
function initAnimation() {
const projects = document.querySelector('.projects');
const preview = document.querySelector('.preview');
const previewImg = document.querySelector('.preview-img');
let isInside = false;
const bgPositions = {
p1: "0 0",
p2: "0 -280px",
p3: "0 -560px",
p4: "0 -840px",
p5: "0 -1120px",
};
const moveProject = (e) => {
const previewRect = preview.getBoundingClientRect();
const offsetX = previewRect.width / 2;
const offsetY = previewRect.height / 2;
gsap.to(preview, {
duration: 0.7,
left: e.pageX - offsetX + 'px',
top: e.pageY - offsetY + 'px',
});
};
const moveProjectImg = (project) => {
const projectId = project.getAttribute('data-p');
gsap.to(previewImg, {
duration: 0.4,
backgroundPosition: bgPositions[projectId] || "0 0",
});
};
const isMouseInsideContainer = (e) => {
const containerRect = projects.getBoundingClientRect();
return (
e.pageX >= containerRect.left &&
e.pageX <= containerRect.right &&
e.pageY >= containerRect.top &&
e.pageY <= containerRect.bottom
);
};
const projectsList = Array.from(projects.children);
projectsList.forEach((project) => {
project.addEventListener('mousemove', moveProject);
project.addEventListener('mousemove', moveProjectImg.bind(null, project));
project.addEventListener('mouseenter', () => {
gsap.to(preview, { duration: 0.5, scale: 1 });
});
project.addEventListener('mouseleave', () => {
gsap.to(preview, { duration: 0.5, scale: 0 });
});
});
}
</script>