Анимация с масками

Главная / Библиотека / Анимация с масками

Видеоинструкция по подключению

Youtube

Альтернативный плеер

ID Шаблона

Категория

Последнее обновление

22 Августа, 2022

Бесплатные, Эффекты, Изображения

29802338

Скриншоты шаблона

Как подключить шаблон?

Шаблон

Пошаговая инструкция с подключением кода

Шаг 1

В Figma создаём фигуру во фрейме под размеры скажем карточки (у меня это 255на 320px) , создаём её копию, видоизменяем и выгружаем обе в формате svg

Шаг 2

В Zero блоке создаём 3 шейпа: trigger-1 (красный), card-mask-1 (изображение), шейп с задним фоном (синий) - порядок на слоях такой, сверху вниз

Шаг 3

Убираем заливку у триггера и накладываем поверх card-mask-1

Шаг 4

Соединяем все элементы в 1 группу и создаем необходимое количество таких же карточек, меняя только порядковый номер у тригеров и карточек trigger-1(2,3,4) и card-mask-1(2,3,4)

Шаг 5

В конце страницы или футере добавляем код, через блок T123

 
<!--Анимация с масками-->
<!--https://mt-webdesign.ru/mask-->
<script>
// Анимация с первой карточкой
$("body").on("mouseover mouseout", '.trigger-1', function(){
$('.card-mask-1').toggleClass("card-mask-1-show");
});
// Анимация со второй карточкой
$("body").on("mouseover mouseout", '.trigger-2', function(){
$('.card-mask-2').toggleClass("card-mask-2-show");
});
// Анимация с третьей карточкой
$("body").on("mouseover mouseout", '.trigger-3', function(){
$('.card-mask-3').toggleClass("card-mask-3-show");
});
// Анимация с четвертой карточкой
$("body").on("mouseover mouseout", '.trigger-4', function(){
$('.card-mask-4').toggleClass("card-mask-4-show");
});
</script>
<style>
.card-mask-1, .card-mask-2, .card-mask-3, .card-mask-4 {
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
clip-path: path('M151.5 0H255V145.5L121.5 88L151.5 0Z');
overflow: hidden;
}
.card-mask-1-show, .card-mask-2-show, .card-mask-3-show, .card-mask-4-show {
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
clip-path: path('M-88.5 0H255V405.5L-38.5 348L-88.5 0Z');
overflow: hidden;
}
.card-mask-1 .tn-atom, .card-mask-2 .tn-atom, .card-mask-3 .tn-atom, .card-mask-4 .tn-atom {
transform: scale(1);
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}
.card-mask-1-show .tn-atom, .card-mask-2-show .tn-atom, .card-mask-3-show .tn-atom, .card-mask-4-show .tn-atom {
transform: scale(1.1);
transition-duration: 0.5s;
transition-timing-function: cubic-bezier(0.250, 0.460, 0.450, 0.940); /* easeOutQuad */
}
</style>
 