Есть меню, которое реализовано на HTML/CSS. Мне пришла идея сделать его совместно с SVGфильтрами, а конкретно с эффектом "вязкости" (Goo) для каждого элемента меню.
1. Пример с Goo
2. Меню, которое нужно сделать с таким эффектом:
Вопрос: Как правильно применить фильтры для этого меню?
Ответ
Фильтры SVG - это довольно огромная тема.
Одни из самых широко применяемых -
В данном случае мы будем применять
Первый шаг:
Возьмём для начала "каркас":
$(".goo-button").on("click", function() {
$(".goo-button").toggleClass("active");
$(".goo-button span").toggleClass("active");
$(".circle").toggleClass("goo-active");
});
* {
margin: 0;
padding: 0;
}
a {
font-size: 1.5em;
color: #fff;
}
.wrapper {
position: relative;
margin: 15px;
}
.goo-button {
position: relative;
background-color: #0066ff;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
transition: ease-out 200ms;
}
.goo-button.active {
transform: scale(0.8);
}
.goo-menu span {
position: absolute;
display: block;
width: 40px;
height: 4px;
background-color: #ffffff;
margin: 4px;
transition: all 0.5s;
}
.goo-menu span:first-child {
top: 26px;
left: 15px;
}
.goo-menu span:nth-child(2) {
top: 36px;
left: 15px;
}
.goo-menu span:nth-child(3) {
top: 46px;
left: 15px;
}
.goo-menu span.active:first-child {
top: 36px;
transform: rotate(45deg);
}
.goo-menu span.active:nth-child(2) {
opacity: 0;
transition: opacity 0.3s;
}
.goo-menu span.active:nth-child(3) {
top: 36px;
transform: rotate(-45deg);
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
background: #0066ff;
border-radius: 50%;
position: absolute;
top: 8px;
left: 8px;
z-index: -1;
transition: ease-out 200ms;
cursor: pointer;
}
.c1.goo-active {
top: 105px;
left: 20px;
transition-delay: 0.1s;
}
.c2.goo-active {
top: 20px;
left: 105px;
transition-delay: 0.3s;
}
.c3.goo-active {
top: 80px;
left: 80px;
transition-delay: 0.2s;
}
Второй шаг:
Теперь нам нужно использовать сами фильтры, но перво-наперво немного
теории.
SVG фильтры модифицируют графические объекты. Каждый элемент
фильтра содержит в себе набор примитивов фильтров, которые выполняют
определённую графическую операцию. Мы можем использовать результат
операции как входной сигнал для другого фильтра, создавая
ограниченный охват возможностей для эффектов.
Самый обычный пример с использованием фильтра
Фильтры для HTML-элементов подключаются таким образом:
.elem{
-webkit-filter: url("#filter");
filter: url("#filter");
}
Третий шаг:
После того, как мы разобрались, можно приступать к созданию эффекта
"вязкости (или липкости).
В последнем фрагменте кода мы использовали 3 операции:
$(".goo-button").on("click", function() {
$(".goo-button").toggleClass("active");
$(".goo-button span").toggleClass("active");
$(".circle").toggleClass("goo-active");
});
* {
margin: 0;
padding: 0;
}
a {
font-size: 1.5em;
color: #fff;
}
.wrapper {
position: relative;
margin: 15px;
}
/*Подключаем наши фильтры*/
.goo-menu {
-webkit-filter: url(#gooEffect");
filter: url("#gooEffect");
}
.goo-button {
position: relative;
background-color: #0066ff;
width: 80px;
height: 80px;
border-radius: 50%;
cursor: pointer;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.7);
}
.goo-button.active {
transform: scale(0.8);
}
.goo-menu span {
position: absolute;
display: block;
width: 40px;
height: 4px;
background-color: #ffffff;
margin: 4px;
transition: all 400ms;
}
.goo-menu span:first-child {
top: 26px;
left: 15px;
}
.goo-menu span:nth-child(2) {
top: 36px;
left: 15px;
}
.goo-menu span:nth-child(3) {
top: 46px;
left: 15px;
}
.goo-menu span.active:first-child {
top: 36px;
transform: rotate(45deg);
}
.goo-menu span.active:nth-child(2) {
opacity: 0;
transition: opacity 300ms;
}
.goo-menu span.active:nth-child(3) {
top: 36px;
transform: rotate(-45deg);
}
.circle {
display: flex;
justify-content: center;
align-items: center;
width: 4em;
height: 4em;
background: #0066ff;
border-radius: 50%;
position: absolute;
top: 8px;
left: 8px;
z-index: -1;
transition: ease-out 200ms;
cursor: pointer;
}
.c1.goo-active {
top: 105px;
left: 20px;
transition-delay: 100ms;
}
.c2.goo-active {
top: 20px;
left: 105px;
transition-delay: 300ms;
}
.c3.goo-active {
top: 80px;
left: 80px;
transition-delay: 200ms;
}
P.S. Воздерживайтесь от применения этих фильтров на больших площадях, так как они достаточно ресурсоёмкие.
Комментариев нет:
Отправить комментарий