Минималистичная форма поиска с интересным эффектом при раскрытие
В редакторе
Минималистичная форма поиска с интересным эффектом при раскрытие
Brain_Script
1311
2021-04-21 16:37:14
<div class="search">
<input class="input" type="text">
<svg viewBox="0 0 700 100" class="magnifying-glass">
<path
class="magnifying-glass-path"
d="m 59.123035,59.123035 c -10.561361,10.56136 -27.684709,10.56136 -38.24607,0 -10.56136,-10.561361 -10.56136,-27.684709 0,-38.24607 10.561361,-10.56136 27.684709,-10.56136 38.24607,0 10.56136,10.561361 10.56136,27.684709 0,38.24607 l 28.876965,28.876965 c 6.304625,7.101523 5.754679,-0.187815 13.07143,-0.5 h 582.04101" />
<path
class="x"
d="m 673.46803,25.714286 -37.17876,38.816532 c 0,0 -5.08857,5.60515 -5.68529,11.841734 -1.06622,11.143538 13.02902,11.127448 13.02902,11.127448" />
<path
class="x"
d="m 635.08021,25.714286 37.17876,38.816532 c 0,0 5.08857,5.60515 5.68529,11.841734 1.06622,11.143538 -13.02902,11.127448 -13.02902,11.127448" />
</svg>
<div class="overlay overlay-1"></div>
<div class="overlay overlay-2"></div>
</div>
body {
align-items: center;
display: flex;
height: 100vh;
justify-content: center;
margin: 0;
}
.search {
position: relative;
width: 300px;
}
.magnifying-glass {
position: relative;
transform: translateX(40%);
transition: transform 500ms;
}
.search.active .magnifying-glass {
transform: translateX(-7%);
}
.magnifying-glass-path {
fill:none;
stroke-dasharray: 210 808;
stroke-linecap:round;
stroke-width:6;
stroke:#000;
transition: stroke-dasharray 500ms, stroke-dashoffset 500ms;
}
.search.active .magnifying-glass-path {
stroke-dasharray: 580 808;
stroke-dashoffset: -224px;
}
.x {
fill:none;
stroke-dasharray: 56 92;
stroke-dashoffset: -92px;
stroke-linecap:round;
stroke-width:6;
stroke:#000;
transition: stroke-dashoffset 500ms;
visibility: hidden;
}
.search.active .x {
visibility: visible;
}
.search.searching .x {
stroke-dashoffset: 0;
}
.input {
border: 0;
font-size: 1.2em;
left: 20px;
outline: 0 !important;
position: absolute;
top: 4px;
}
.overlay {
background: rgba(0,0,0,0);
border-radius: 50%;
cursor: pointer;
position: absolute;
transition: background 300ms;
}
.overlay-1 {
height: 64px;
left: 110px;
top: -10px;
width: 64px;
}
.overlay-2 {
height: 38px;
left: 240px;
top: 0px;
width: 38px;
}
.overlay:hover {
background: rgba(0,0,0,0.08);
}
.search.active .overlay-1 {
visibility: hidden;
}
.search:not(.active) .overlay-2,
.search:not(.searching) .overlay-2 {
visibility: hidden;
}
const overlay1 = document.querySelector('.overlay-1');
const overlay2 = document.querySelector('.overlay-2');
const search = document.querySelector('.search');
const input = document.querySelector('.input');
overlay1.addEventListener('click', () => {
search.classList.toggle('active');
if (search.classList.contains('active')) {
setTimeout(() => {
input.focus();
}, 200)
}
})
search.addEventListener('click', () => {
if (search.classList.contains('active')) {
setTimeout(() => {
input.focus();
}, 200)
}
})
overlay2.addEventListener('click', (e) => {
input.value = '';
input.focus();
search.classList.remove('searching')
})
document.body.addEventListener('click', (e) => {
if (!search.contains(e.target) && input.value.length === 0) {
search.classList.remove('active');
search.classList.remove('searching');
input.value = '';
}
})
input.addEventListener('keyup', (e) => {
if (e.keyCode === 13) {
input.blur();
}
})
input.addEventListener('input', () => {
if (input.value.length > 0) {
search.classList.add('searching')
} else {
search.classList.remove('searching')
}
})
input.value = '';
input.blur();
Войдите для добавления комментария.