Переключение изображений

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

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

Описание

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

В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3

Шаг 1

Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3

Шаг 2

Ниже добавляем блок T123 и помещаем в него код

Шаг 3

<script>
// Тригер для первой кнопки btn-trigger-1
$("body").on("mouseover", '.btn-trigger-1', function(){
$('.img-switch-1').toggleClass("animation-step-1");
$('.img-switch-1').removeClass("animation-step-2");
});
$("body").on("mouseout", '.btn-trigger-1', function(){
$('.img-switch-1').removeClass("animation-step-1");
$('.img-switch-1').toggleClass("animation-step-2");
});
var intervalId = window.setInterval(function(){
$('.img-switch-1').removeClass("animation-step-2");
}, 400);
// Тригер для второй кнопки btn-trigger-2
$("body").on("mouseover", '.btn-trigger-2', function(){
$('.img-switch-2').toggleClass("animation-step-1");
$('.img-switch-2').removeClass("animation-step-2");
});
$("body").on("mouseout", '.btn-trigger-2', function(){
$('.img-switch-2').removeClass("animation-step-1");
$('.img-switch-2').toggleClass("animation-step-2");
});
var intervalId = window.setInterval(function(){
$('.img-switch-2').removeClass("animation-step-2");
}, 400);
// Тригер для третьей кнопки btn-trigger-3
$("body").on("mouseover", '.btn-trigger-3', function(){
$('.img-switch-3').toggleClass("animation-step-1");
$('.img-switch-3').removeClass("animation-step-2");
});
$("body").on("mouseout", '.btn-trigger-3', function(){
$('.img-switch-3').removeClass("animation-step-1");
$('.img-switch-3').toggleClass("animation-step-2");
});
var intervalId = window.setInterval(function(){
$('.img-switch-3').removeClass("animation-step-2");
}, 400);
</script>
<style>
.img-switch-1, .img-switch-2, .img-switch-3 {
transition-duration: 500ms;
top: -100% !important;
opacity: 0;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 
}
.animation-step-1 {
transition-duration: 500ms;
top: 50% !important;
transform: translate(0%, -50%);
opacity: 1;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 
}
.animation-step-2 {
transition-duration: 300ms;
top: 100% !important;
opacity: 0;
animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1); 
}
</style>