Animasi mask password ini merupakan sebuah animasi yang ada pada form input saat show atau hide password. Kenapa saya disini ingin membagikan tutorial mengenai animasi mask password, karena agar lebih menarik desain website yang ditampilkan. Bagaimana cara membuatnya yuk simak langkah-langkah berikut ini.

Langkah pertama tentunya buka text editor yang sahabat pakai, lalu siapkan sebuah template dari bootstrap agar lebih mudah digunakan seperti code berikut ini:

Nah dalam code diatas saya sudah menambahkan beberapa form input dengan type password. Jika sudah mengetikkan code diatas selanjutnya tambahkan plugin Icon dari Fontawesome dan plugin JQuery peeper seperti code dibawah ini.

Apabila sudah simpan terlebih dahulu, dan jangan lupa untuk menambahkan script dari Jquery berikut ini agar bisa menjalankan animasinya.

Jika selesai mengetikkan semua code, langsung saja jalankan pada browser masing-masing jika benar maka seperti tampilan dibawah ini:

Membuat Animasi Show Password

  • pada form pertama animasi akan berjalan jika menekan beberapa waktu agar terlihat passwordnya.
  • pada form kedua anaimasi berjalan saat klik icon
  • dan form ketiga klik pada inputan maka akan menampilkan password

Saya kira cukup tentang pembahasan membuat animasi mask password, semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya.

terima kasih