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

Уроки по Тильде

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

Описание

Материал из видео

В Zero блоке создаём два одинаковых шейпа и вешаем на них классы: wrapper и wrapper-inside

Шаг 1

В этом Zero блоке создаём еще 3 таких же шейпа (в моем случае 500x480px). В них загружаем изображения и вешаем классы: img_1 , img_2 , img_3

Шаг 2

Создаём опять 3 объекта, при наведении на которые хотим увидеть эффект. В моём случае это шейпы с классами: trigger_1 , trigger_2 , trigger_3

Шаг 3

Далее создаём блок T123 и помещаем в него скрипт (код поместить в конце страницы)

Шаг 4

<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js'></script>
<script>
// Видимое разрешение (заменить 480px на своё)
if ($(window).width() > 480) {
gsap.set(".wrapper", {xPercent: -50, yPercent: -50});
const wrapper = document.querySelector(".wrapper");
const pos_1 = { x: window.innerWidth / 2, y: window.innerHeight / 2 };
const mouse_1 = { x: pos_1.x, y: pos_1.y };
const speed_1 = .1;
const xSet_1 = gsap.quickSetter(wrapper, "x", "px");
const ySet_1 = gsap.quickSetter(wrapper, "y", "px");
window.addEventListener("mousemove", e => { 
mouse_1.x = e.x;
mouse_1.y = e.y; 
});
gsap.ticker.add(() => {
const dt_1 = 1.0 - Math.pow(1.0 - speed_1, gsap.ticker.deltaRatio()); 
pos_1.x += (mouse_1.x - pos_1.x) * dt_1;
pos_1.y += (mouse_1.y - pos_1.y) * dt_1;
xSet_1(pos_1.x);
ySet_1(pos_1.y);
});
// Помещаем изображения в контейнер
$(".wrapper-inside").appendTo('.wrapper');
$(".img_1").appendTo('.wrapper-inside');
$(".img_2").appendTo('.wrapper-inside');
$(".img_3").appendTo('.wrapper-inside');
// Первый тригер
$("body").on("mouseover mouseout", '.trigger_1', function(){
$('.wrapper-inside').toggleClass("animate-wrapper-inside");
});
// Второй тригер
$("body").on("mouseover mouseout", '.trigger_2', function(){
$('.wrapper-inside').toggleClass("animate-wrapper-inside");
$('.img_1').toggleClass("animate-img_1");
$('.img_2').toggleClass("animate-img_2");
$('.img_3').toggleClass("animate-img_3");
});
// Третий тригер
$("body").on("mouseover mouseout", '.trigger_3', function(){
$('.wrapper-inside').toggleClass("animate-wrapper-inside");
$('.img_1').toggleClass("animate-img_11");
$('.img_2').toggleClass("animate-img_22");
$('.img_3').toggleClass("animate-img_33");
});
}
</script>

Через блок T123 подключаем стили (код поместить в конце страницы)

Шаг 5

<style>
/*Контейнеры*/
.wrapper {
overflow: hidden;
top: 0 !important;
left: 0 !important;
position: fixed;
}
.wrapper-inside {
overflow: hidden;
position: absolute;
top: 0 !important;
left: 0 !important;
transform: translate(0%, 0%) scale(0);
transition-duration: 0.4s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-wrapper-inside {
transform: translate(0%, 0%) scale(1);
transition-duration: 0.4s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
/*Первое изображение*/
.img_1 {
position: absolute;
top: 0 !important;
left: 0!important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_1 {
top: -100% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_11 {
top: -200% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
/*Второе изображение*/
.img_2 {
position: absolute;
left: 0 !important;
top: 100% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_2 {
top: 0% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_22 {
top: -100% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
/*Третье изображение*/
.img_3 {
position: absolute;
left: 0 !important;
top: 200% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_3 {
top: 100% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_33 {
top: 0% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
/*Четвертое изображение*/
.img_4 {
position: absolute;
left: 0 !important;
top: 300% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_4 {
top: 200% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
.animate-img_44 {
top: 100% !important;
transition-duration: 0.7s;
animation-timing-function: cubic-bezier(.52,.07,.15,.9);
}
</style>