• Страница 1 из 1
  • 1
Форум » Веб-разработка » Скрипты для сайтов HTML » Выезжающая анимационная форма поиска (Выдвигающаяся форма поиска в желтом цвете для сайта)
Выезжающая анимационная форма поиска
Kosten
Дата: Воскресенье, 2019-02-24, 00:23 | Сообщение 1
Администраторы
Сообщений:20711
Награды: 56


В этом мануале подробно рассмотрим тему, как можно самостоятельно создать на сайте выдвигающуюся форму поиска. Которая по умолчанию идет простой кнопкой, то только стоит сделать клик, как форма поиска их этого элемента появляется. Где даже можно в стилистике выставить скорость появление.

Это форма поиска отличается от других, такой вид можно наблюдать на современном шаблоне сайта, что теперь можно поставить на свои интернет ресурс. Здесь представлены стили CSS, которые полностью подключены под анимацию, но и сам код под каркас дизайна. Что только нужно выставить свои операторы или ссылки, что отвечают за внутренний поиск на этом сервис

Так выглядит по умолчанию:



Здесь появляется панель после клика:



Приступаем к установке:

HTML

Код
<form id="becausarwaysd">
  <input type="text" name="input" class="mokamitelus">
  <button type="reset" class="bumasformative"></button>
</form>


CSS

Код
#becausarwaysd {
  position: absolute;
  height: 50px;
  width: 300px;
  margin-left: 170px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#becausarwaysd.on {
  -webkit-animation-name: in-out;
  animation-name: in-out;
  -webkit-animation-duration: 0.7s;
  animation-duration: 0.7s;
  -webkit-animation-timing-function: linear;
  animation-timing-function: linear;
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

input {
  box-sizing: border-box;
  width: 50px;
  height: 50px;
  border: 4px solid #FFFFFF;
  border-radius: 50%;
  background: none;
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  font-family: Roboto;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.bumasformative {
  background: none;
  position: absolute;
  top: 0px;
  left: 0;
  height: 50px;
  width: 50px;
  padding: 0;
  border-radius: 100%;
  outline: 0;
  border: 0;
  color: inherit;
  cursor: pointer;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}

.bumasformative:before {
  content: "";
  position: absolute;
  width: 20px;
  height: 4px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  margin-top: 26px;
  margin-left: 17px;
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.demanbuman {
  -webkit-transition: 0.4s ease-in-out;
  transition: 0.4s ease-in-out;
  -webkit-transition-delay: 0.4s;
  transition-delay: 0.4s;
}

.demanbuman:before {
  content: "";
  position: absolute;
  width: 27px;
  height: 4px;
  margin-top: -1px;
  margin-left: -13px;
  background-color: #fff;
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
  -webkit-transition: 0.2s ease-in-out;
  transition: 0.2s ease-in-out;
}

.demanbuman:after {
  content: "";
  position: absolute;
  width: 27px;
  height: 4px;
  background-color: #fff;
  margin-top: -1px;
  margin-left: -13px;
  cursor: pointer;
  -webkit-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.nbumanymed {
  box-sizing: border-box;
  padding: 0 40px 0 10px;
  width: 300px;
  height: 50px;
  border: 4px solid #FFFFFF;
  border-radius: 0;
  background: none;
  color: #fff;
  font-family: Roboto;
  font-size: 16px;
  font-weight: 400;
  outline: 0;
  -webkit-transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
  transition: width 0.4s ease-in-out, border-radius 0.4s ease-in-out, padding 0.2s;
  -webkit-transition-delay: 0.4s, 0s, 0.4s;
  transition-delay: 0.4s, 0s, 0.4s;
  -webkit-transform: translate(-100%, -50%);
  -ms-transform: translate(-100%, -50%);
  transform: translate(-100%, -50%);
}


JS

Код
function expand() {
  $(".bumasformative").toggleClass("demanbuman");
  $(".mokamitelus").toggleClass("nbumanymed");
  if ($('.bumasformative').hasClass('demanbuman')) {
    $('mokamitelus').focus();
  } else {
    $('mokamitelus').blur();
  }
}
$('button').on('click', expand);

Здесь аналогично можно самостоятельно оформить под дизайн сайта, ведь идет все стандартно.

Демонстрация
Прикрепления: 7560014.png(3.4 Kb) · 3039718.png(4.2 Kb) · saryh.zip(2.5 Kb)
Страна: (RU)
Форум » Веб-разработка » Скрипты для сайтов HTML » Выезжающая анимационная форма поиска (Выдвигающаяся форма поиска в желтом цвете для сайта)
  • Страница 1 из 1
  • 1
Поиск: