Минималистичная форма поиска с интересным эффектом при раскрытие

В редакторе

Минималистичная форма поиска с интересным эффектом при раскрытие

Brain_Script
43
2021-04-21 13: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();
Войдите для добавления комментария.
Нет комментариев
Яндекс.Метрика Яндекс.Метрика