Анимированная форма поиска с микровзаимодействиями и открытием на всю страницу | Animated Search Form with Micro Interactions

Всем Привет! Сегодня вы узнаете, как создать анимированную форму поиска с микровзаимодействиями используя HTML, CSS и jQuery. Если у вас возникнут какие-либо трудности при создании этого кода, вы можете скачать готовый код, нажав кнопку «СКАЧАТЬ». Также если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент. 

СКАЧАТЬ

HTML КОД:

<!--Font Awesome -->
	<link href='https://use.fontawesome.com/releases/v5.3.1/css/all.css' rel='stylesheet'/>

<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>

CSS КОД:

* {
  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;
}

jQuery КОД:

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

$(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);
});