В этом видео я расскажу, как можно сделать плавную смену между изображений, при наведении на кнопки.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Zero-блоке создаём к примеру 3 изображения (шейпа), выравниваем между собой и задаём им классы: img-switch-1, img-switch-2, img-switch-3
Шаг 1
Создаём 3 кнопки для них с классами: btn-trigger-1, btn-trigger-2, btn-trigger-3
Шаг 2
<!--Переключение изображений-->
<!--https://mt-webdesign.ru/image-slide-->
<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>Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
