Membuat Animasi Search Menggunakan Jquery

Hallo teman-teman Dumet School, pada kesempatan kali ini saya akan Membuat Animasi Search Menggunakan Jquery. Dimana tampilan tombol search ini akan saya buat menggunakan tag input yang berbentuk bulat dan tombol yang berbentuk line. Jika di klik maka input yang berbentuk bulat akan memanjang. Langkah pertama untuk dapat Membuat Animasi Search Menggunakan Jquery yaitu saya akan membuat struktur htmlnya seperti berikut ini.

<form id="content">
      <input type="text" name="input" class="input" placeholder="Cari">
      <button type="reset" class="search"></button>
    </form>

Jika sudah maka tahap selanjutnya saya akan membuat style css masih didalam file yang sama dengan html seperti di bawah ini.

    <style>
    
    body {
        background: salmon;
        background-size: cover;
        color: #fff;
        margin: 0;
        overflow:hidden;
}

    #content {
      position: absolute;
      height: 50px;
      width: 300px;
      margin-left: 465px;
      margin-top: -131px;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }

    #content.on {

      animation-name: in-out;   
      animation-duration: 0.7s;   
      animation-timing-function: linear;
      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;      
      transition: width 0.4s ease-in-out, border-radius 0.8s ease-in-out, padding 0.2s;       
      transition-delay: 0.4s;      
      transform: translate(-100%, -50%);
      padding: 6px;
    }

    .search {
      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;       
      transition: 0.2s ease-in-out;    
      transform: translate(-100%, -50%);
    }

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

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

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

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

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

    </style>

Dan langkah terakhir kita akan membuat script jquery untuk menjalankan animasi search yang akan kita buat seperti di bawah ini.

<script src="https://code.jquery.com/jquery-3.3.1.js"></script>

<script>
function expand() {
  $(".search").toggleClass("close");
  $(".input").toggleClass("square");
  if ($('.search').hasClass('close')) {
    $('input').focus();
  } else {
    $('input').blur();
  }
}
$('button').on('click', expand);
</script>

Demikian artikel tentang cara  Membuat Animasi Search Menggunakan Jquery. Semoga dapat bermanfaat dan selamat mencoba.

25 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat