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

<!--Перелистывание изображений-->
<!--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: 400px; /*Ширина контейнера под изображение*/
--ImgHeightSlide: 400px; /*Высота контейнера под изображение*/
--ImgIndexSlide: 0; /*Расположение изображения, чем выше значение, тем ближе положение его*/
--ImgBGSlide: url('https://static.tildacdn.com/tild3461-3536-4463-b638-643864643138/Group_1.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: 1200px) {
.preview {
display: none;
}
}
</style>
<script>
// Перечисляем количество секций (5)
for (let i = 1; i <= 5; i++) {
$(`.previmg${i}`)
.addClass('project')
.attr('id', `p${i}`);
}
$('.project').wrapAll('<div class="projects"></div>');
</script>
<script>
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 -400",
p3: "0 -800",
p4: "0 -1200",
p5: "0 -1600",
};
const moveStuff = (e) => {
const mouseInside = isMouseInsideContainer(e);
if (mouseInside !== isInside) {
isInside = mouseInside;
gsap.to(preview, 0.7, {
scale: isInside ? 1 : 0,
});
}
};
const moveProject = (e => {
const previewRect = preview.getBoundingClientRect();
const offsetX = previewRect.width / 2;
const offsetY = previewRect.height / 2;
gsap.to(preview, 0.7, {
left: e.pageX - offsetX + 'px',
top: e.pageY - offsetY + 'px',
});
});
const moveProjectImg = (project) => {
const projectId = project.id;
gsap.to(previewImg, 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, 0.5, {
scale: 1,
});
});
project.addEventListener('mouseleave', () => {
gsap.to(preview, 0.5, {
scale: 0,
});
});
});
</script>