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

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

В этом видео я расскажу, как создать интересный эффект перелистывания изображений, при наведении.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
42457816
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Zero блоке создаём шейп и присваиваем ему класс previmg1, заливку убираем. Для последующих сохраняем название, меняя только порядковый номер: previmg2, previmg3, и тд
Шаг 1
Создаём свои изображения с необходимым размером и объединяем их в группу, после выгружаем. Получится одно общее изображение. Загружаем его, через блок IM01 в качестве изображения. URL его позже пригодится.
Шаг 2
Далее создаём блок T123 и помещаем в него скрипт (код поместить в конце страницы)
Шаг 4
<!--Перелистывание изображений-->
<!--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>
В настройках меняем параметры под себя. Меняем размер изображения, указываем url-изображения, указываем кол. изображений, видимое разрешение, меняем положение на экране.
Шаг 5
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
3D галерея
Tilda
Подсказки при наведении курсора
Tilda