Applying some micro-interactions on a search form ui.
Inspired By: https://www.uplabs.com/posts/search-away-microinteraction
A Pen by Himalaya Singh on CodePen.
Applying some micro-interactions on a search form ui.
Inspired By: https://www.uplabs.com/posts/search-away-microinteraction
A Pen by Himalaya Singh on CodePen.
<div id="app-cover"> | |
<div id="app"> | |
<form method="get" action=""> | |
<div id="f-element"> | |
<div id="inp-cover"><input type="text" name="query" placeholder="Type something to search ..." autocomplete="off"></div> | |
</div> | |
<button type="submit" class="shadow"><i class="fas fa-search"></i></button> | |
</form> | |
</div> | |
<div id="layer" title="Click the blue area to hide the form"></div> | |
<div id="init"></div> | |
</div> |
$(function() | |
{ | |
var app = $('#app'), init = $('#init'), layer = $('#layer'), input = $('#inp-cover input'), button = $('button'); | |
function toggleApp() | |
{ | |
app.toggleClass('opened'); | |
if( button.hasClass('shadow') ) | |
button.toggleClass('shadow'); | |
else | |
setTimeout(function(){ button.toggleClass('shadow'); },300); | |
if( app.hasClass('opened') ) | |
{ | |
setTimeout(function(){ input.toggleClass('move-up'); },200); | |
setTimeout(function(){ input.focus(); },500); | |
} | |
else | |
setTimeout(function(){ input.toggleClass('move-up').val(''); },200); | |
if( ! layer.hasClass('sl') ) | |
{ | |
setTimeout(function() | |
{ | |
layer.addClass('sl'); | |
},800); | |
} | |
else | |
setTimeout(function(){ layer.removeClass('sl'); },300); | |
} | |
layer.on('click',toggleApp); | |
init.on('click',toggleApp); | |
}); |
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> |
* | |
{ | |
outline: none; | |
} | |
html, body | |
{ | |
height: 100%; | |
min-height: 100%; | |
} | |
body | |
{ | |
margin: 0; | |
} | |
body, input | |
{ | |
cursor: url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 32 32, auto; | |
cursor: -webkit-image-set(url(http://k003.kiwi6.com/hotlink/vp054ir5gt/c1.png) 1x,url(http://k003.kiwi6.com/hotlink/z6fy599487/c2.png) 2x) 32 32, auto; | |
} | |
body:active, input:active | |
{ | |
cursor: url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 32 32, auto; | |
cursor: -webkit-image-set( url(http://k003.kiwi6.com/hotlink/3p6w4icbzt/c1a.png) 1x, url(http://k003.kiwi6.com/hotlink/6ma7828al1/c2a.png) 2x ) 32 32, auto; | |
} | |
#app-cover | |
{ | |
position: absolute; | |
top: 50%; | |
right: 0; | |
left: 0; | |
width: 434px; | |
margin: -41px auto 0 auto; | |
} | |
#app | |
{ | |
position: relative; | |
width: 82px; | |
height: 82px; | |
border-radius: 120px; | |
margin: 0 auto; | |
transition: 0.15s ease width; | |
z-index: 2; | |
} | |
form | |
{ | |
position: relative; | |
height: 82px; | |
cursor: auto; | |
border-radius: 120px; | |
} | |
#f-element | |
{ | |
position: absolute; | |
top: 0; | |
right: 0; | |
bottom: 0; | |
left: 0; | |
overflow: hidden; | |
border-radius: 120px; | |
} | |
#inp-cover | |
{ | |
position: absolute; | |
top: 0; | |
right: 41px; | |
bottom: 0; | |
left: 0; | |
padding: 0 35px; | |
background-color: #fff; | |
} | |
input | |
{ | |
display: block; | |
width: 100%; | |
font-size: 19px; | |
font-family: Arial, Helvetica, sans-serif; | |
color: #00688a; | |
border: 0; | |
padding: 30px 0; | |
margin: 0; | |
margin-top: 52px; | |
line-height: 1; | |
background-color: transparent; | |
transition: 0.15s ease margin-top; | |
cursor: auto; | |
} | |
button | |
{ | |
position: absolute; | |
top: 0; | |
right: 0; | |
width: 82px; | |
height: 82px; | |
color: #fff; | |
font-size: 30px; | |
line-height: 1; | |
padding: 26px; | |
margin: 0; | |
border: 0; | |
background-color: #1eaddc; | |
transition: 0.2s ease background-color; | |
border-radius: 50%; | |
} | |
button.shadow | |
{ | |
box-shadow: 0 10px 30px #d0d0d0; | |
} | |
button i.fas | |
{ | |
display: block; | |
line-height: 1; | |
} | |
#layer | |
{ | |
width: 80px; | |
height: 80px; | |
border-radius: 50%; | |
background-color: #1eaddc; | |
transition: 0.9s ease all; | |
z-index: 1; | |
} | |
#layer.sl | |
{ | |
transition: 0.3s ease all; | |
} | |
#layer, #init | |
{ | |
position: fixed; | |
top: 50%; | |
margin: -40px auto 0 auto; | |
} | |
#layer | |
{ | |
right: -100px; | |
left: -100px; | |
} | |
#init | |
{ | |
right: 0; | |
left: 0; | |
width: 82px; | |
height: 82px; | |
cursor: pointer; | |
z-index: 2; | |
} | |
#app.opened | |
{ | |
width: 434px; | |
box-shadow: 0 10px 30px #0190bf; | |
} | |
.opened input.move-up | |
{ | |
margin-top: 0; | |
} | |
.opened button | |
{ | |
color: #1eaddc; | |
background-color: #fff; | |
box-shadow: none; | |
cursor: pointer; | |
} | |
#app.opened + #layer | |
{ | |
width: 4000px; | |
height: 4000px; | |
margin-top: -2000px; | |
opacity: 1; | |
z-index: 0; | |
} | |
#app.opened ~ #init | |
{ | |
z-index: -1; | |
} |
<link href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" rel="stylesheet" /> |