В этом видео я расскажу, как создать эффект с мягким перетеканием пузыря с помощью css анимации.
Описание
Видеоинструкция по подключению
Создаём новую страницу на сайте
Шаг 1
Скроллим в самый низ и нажимаем кнопку «Указать ID шаблона»
Шаг 2
В графе указываем номер шаблона (он указан в начале инструкции), нажимаем кнопку «Выбрать»
Шаг 3
Пошаговая инструкция с подключением кода
В Figma создаём 3 объекта (формы) и выгружаем их в формате svg
Шаг 1
Затем в Zero блоке создаем html блок и добавляем в него код ниже. Самому html блоку задаём размеры такие же, как и самим объектам. К примеру 900x900px
Шаг 2
<!--Эффект перетекания-->
<!--https://mt-webdesign.ru/overflow-->
<img class="image_1" src="https://static.tildacdn.com/tild3332-6631-4364-a533-303364363763/Frame_36.jpg" alt="lel" />Добавляем класс link-bubble-1 на элемент с которым хотим увидеть взаимодействие
Шаг 3
С помощью блока IM01 загружаем своё изображение тех же размеров. Копируем его url и меняем путь в html блоке в строке src=''
Шаг 4
<script>
$("body").on("mouseover mouseout", '.link-bubble-1', function(){
$('.link-bubble-1').toggleClass("link-color-brown-active");
$('.link-bubble-2').toggleClass("link-color-brown");
$('.link-bubble-3').toggleClass("link-color-brown");
$('.link-color').toggleClass("color-brown");
});
</script>
<style>
.link-color .tn-atom {
transition-duration: 0.7s;
}
.color-brown .tn-atom {
color: #80786A !important;
transition-duration: 0.7s;
}
.link-bubble-1 .tn-atom {
transition-duration: 0.7s;
}
.link-color-brown .tn-atom {
transition-duration: 0.7s;
color: transparent !important;
-webkit-text-stroke: 1px #80786A;
}
.link-color-brown-active .tn-atom {
transition-duration: 0.7s;
color: #ffffff !important;
-webkit-text-stroke: 1px #ffffff;
}
</style><style>
:root {
--clip-path-1: path(
"M715 340C715 586.899 594.645 710 347.5 710C100.355 710 0 611.899 0 365C0 118.101 137.355 0 384.5 0C631.645 0 715 93.1005 715 340Z"
);
--clip-path-2: path(
"M699.239 152.761C816.543 342.98 732.566 578.576 482.086 682.216C231.607 785.857 138.44 678.886 66.6785 520.238C-2.87282 366.477 -80.0001 147 189.5 56C459 -35.0003 590.807 -23.0723 699.239 152.761Z"
);
--clip-path-3: path(
"M558.5 199.999C639 413.499 591.5 561.999 437.669 670.216C187.189 773.856 101.177 656.64 78.4999 483.999C63 366 -124.418 134.999 145.082 43.9993C414.582 -47.001 485.618 6.70378 558.5 199.999Z"
);
}
.image_1 {
height: 100%;
width: 100%;
object-fit: cover;
clip-path: var(--clip-path-1);
animation: blobby_1 5s ease-in-out infinite;
}
@keyframes blobby_1 {
0% {
clip-path: var(--clip-path-1);
}
25% {
clip-path: var(--clip-path-2);
}
50% {
clip-path: var(--clip-path-3);
}
75% {
clip-path: var(--clip-path-2);
}
100% {
clip-path: var(--clip-path-1);
}
}
</style>Ранее сохраненные svg элементы открываем через блокнот и копируем их путь. Примерно такого формата: M745.826 502.356C745.826 749.256 573.925 858 326.78 858C79.6345 858 0 657.848 0 410.949C0 164.05 266.475 0 513.621 0C760.766 0 745.826 255.457 745.826 502.356Z
Шаг 7
Переходим в стили из шага 6 и заменяем каждый путь на свои
Шаг 8
В самом зеро блоке можно повесить пошаговую анимацию на появление html блока, при наведении на объект
Шаг 9
Более подробные настройки, возможности взаимодействия и подключение в видео
Другие модификации
