В этом видео я расскажу, как можно с помощью простой маски создать уникальный блок для своего сайта.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Figma создаём фигуру во фрейме под размеры скажем карточки (у меня это 255на 320px) , создаём её копию, видоизменяем и выгружаем обе в формате svg
Шаг 1
В Zero блоке создаём 3 шейпа: trigger-1 (красный), card-mask-1 (изображение), шейп с задним фоном (синий) - порядок на слоях такой, сверху вниз
Шаг 2
На card-mask-1 вешаем класс card-mask-1 и загружаем фоновое изображение. На trigger-1 (красный) вешаем класс trigger-1 и убираем заливку (это тригер)
Шаг 3
Соединяем все элементы в 1 группу и создаем необходимое количество таких же карточек, меняя только порядковый номер у тригеров и карточек trigger-1(2,3,4) и card-mask-1(2,3,4)
Шаг 4
<!--Анимация с масками-->
<!--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>Возвращаемся к фигурам из шага 1, открывем их через блокнот и копируем путь. Он будет выглядить примерно так: M151.5 0H255V145.5L121.5 88L151.5 0Z
Шаг 6
В коде заменяем пути на свои, из двух фигур. В статичном состоянии и при наведении
Шаг 7
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
