Меню

Анимация карточек

Анимация карточек

В этом видео я расскажу, как создать смену активной карточки при наведении на неё.

Описание
Видеоинструкция по подключению
Инструкция с копированием шаблона к себе
ID шаблона:
29607813
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
Создаём 3 шейпа размерами к примеру 360x550px, загружаем в них свои изображения и вешаем на них классы: card-1, card-2, card-3
Шаг 1
Создаём еще 3 шейпа поверх, убираем у них заливку и вешаем на них классы: card-triger-1, card-triger-2, card-triger-3 (они будут тригерами)
Шаг 2
Создаём элементы, которые будут видны, пока мы не наведём на активную карточку. В моём случае это 3 заголовка. И добавляем на них пошаговую анимацию на ховер. Тригером для ховера я поставил шейпы с классами card-triger-1(2,3). Заголовки поместил под шейпы-тригеры.
Шаг 3
На второй заголовок я добавил класс text-card-2. На пошаговой анимации я выбрал в качестве тригера шейп с классом card-triger-2. А в параметрах анимации дополнительно сдвинул заголовок влево на -100px.
Шаг 4
На третий заголовок я добавил класс text-card-3. На пошаговой анимации я выбрал в качестве тригера шейп с классом card-triger-3. А в параметрах анимации дополнительно сдвинул заголовок влево на -100px.
Шаг 5
Создаём элементы, которые будут появлятся при наведении на активную карточку. У меня это заголовок и описание. Им задал анимацию на появление из прозрачности. В качестве тригера опять выбрал шейпы с классами card-triger-1(2,3). Тоже самое проделал с остальными карточками.
Шаг 6
Ниже добавляем блок T123 и помещаем в него код
Шаг 6
<!--Анимация карточек-->
<!--https://mt-webdesign.ru/cards-->
<script>
// Анимация с первой карточкой
$("body").on("mouseover mouseout", '.card-triger-1', function(){
$('.card-1').toggleClass("card-show");
$('.text-card-3').toggleClass("text-card-3-right");
$('.text-card-2').toggleClass("text-card-2-right");
$('.card-triger-1').toggleClass("card-triger-1-show");
$('.card-2').toggleClass("card-hide-2");
$('.card-3').toggleClass("card-hide-3");
});
// Анимация со второй карточкой
$("body").on("mouseover mouseout", '.card-triger-2', function(){
$('.text-card-3').toggleClass("text-card-3-right");
$('.card-1').toggleClass("card-hide-1");
$('.card-2').toggleClass("card-show-2");
$('.card-triger-2').toggleClass("card-triger-2-show");
$('.card-3').toggleClass("card-hide-3");
});
// Анимация с третьей карточкой
$("body").on("mouseover mouseout", '.card-triger-3', function(){
$('.text-card-2').toggleClass("text-card-2-left");
$('.text-card-3').toggleClass("text-card-3-left");
$('.card-1').toggleClass("card-hide-1");
$('.card-2').toggleClass("card-hide-2-left");
$('.card-triger-3').toggleClass("card-triger-3-show");
$('.card-3').toggleClass("card-show-3");
});
</script>
<style>
/*Разрешения на которых будет работать скрипт (от 1024 до 2560px) */
@media only screen and (min-width : 1024px) and (max-width : 2560px) {
.card-1, .card-2, .card-3,
.card-1 .tn-atom, .card-2 .tn-atom, .card-3 .tn-atom,
.card-triger-1, .card-triger-2, .card-triger-3 {
transition-duration: 0.5s;
}
.text-card-2, .text-card-3 {
transition-duration: 0.5s;
}
.text-card-2-right {
transform: translateX(200px);
transition-duration: 0.5s;
}
.text-card-3-right {
transform: translateX(100px);
transition-duration: 0.5s;
}
.text-card-2-left, .text-card-3-left {
transform: translateX(-100px);
transition-duration: 0.5s;
}
.card-1:before, .card-2:before, .card-3:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
border-radius: 20px;
pointer-events: none;
background: linear-gradient(0deg, rgb(0 0 0) 0%, rgb(0 0 0 / 0%) 50%, rgb(0 0 0 / 0%) 100%);
}
.card-show, .card-triger-1-show {
width: 560px !important;
transition-duration: 0.5s;
}
.card-show .tn-atom {
background-position: 100% 15% !important;
transition-duration: 0.5s;
}
.card-hide-1 {
width: 260px !important;
transition-duration: 0.5s;
}
.card-hide-2 {
transform: translateX(200px);
width: 260px !important;
transition-duration: 0.5s;
}
.card-hide-3 {
transform: translateX(100px);
transition-duration: 0.5s;
width: 260px !important;
}
.card-show-2, .card-triger-2-show {
transform: translateX(-100px);
width: 560px !important;
transition-duration: 0.5s;
}
.card-show-2 .tn-atom {
background-position: 100% 15% !important;
transition-duration: 0.5s;
}
.card-hide-2-left {
transform: translateX(-100px);
width: 260px !important;
transition-duration: 0.5s;
}
.card-show-3, .card-triger-3-show {
transform: translateX(-200px);
width: 560px !important;
transition-duration: 0.5s;
}
.card-show-3 .tn-atom {
background-position: 100% 15% !important;
transition-duration: 0.5s;
}
}
</style>
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
Эффект следа из изображений
Tilda
Анимация градиента на тексте
Tilda
Made on
Tilda