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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!doctype html> <html lang="en"> <head> <!-- Required meta tags --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"> <title>Membuat Animasi Mask Password</title> </head> <body> <div class="container mt-5"> <div class="row"> <div class="col-md-6 offset-md-3"> <h1 class="text-center text-info">Membuat Animasi Mask Password</h1> </div> </div> </div> <div class="container mt-5 mb-5"> <div class="row"> <div class="col-md-6 offset-md-3"> <div class="form-group"> <label for="input1">Animated mask Secret Key</label> <input type="password" id="pass1" class="form-control" name="password" value="secretkey"> <small>Show on <i>mouseup</i> event</small> </div> <div class="form-group"> <label for="input2">Toggle on click</label> <input type="password" id="pass2" class="form-control" name="password" value="privatekey"> <small>Toggle show password on <i>click</i></small> </div> <div class="form-group"> <label for="input3">Only click mask</label> <input type="password" id="pass3" class="form-control" name="password" value="passwordkey"> <small>Show password by clicking on the mask</small> </div> </div> </div> </div> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script> </body> </html> |
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.
1 2 3 4 5 6 7 8 9 |
// tambahkan dalam tag head <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.css"> <link rel="stylesheet" href="jquery-peeper.min.css"> // tambahkan setelah script plugin js bootstrap <script src="jquery-peeper.min.js"></script> |
Apabila sudah simpan terlebih dahulu, dan jangan lupa untuk menambahkan script dari Jquery berikut ini agar bisa menjalankan animasinya.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<script> $(function(){ $("#pass1").peeper({ mask: true, maskCss: 'gray' }); $("#pass2").peeper({ maskCss: 'gray', showEvent: 'click', showPasswordBtn: true }); $("#pass3").peeper({ maskCss: 'gray', showPasswordBtn: false, showCopyBtn: true, showElement: '.peeper-mask', showEvent: 'click' }); }); </script> |
Jika selesai mengetikkan semua code, langsung saja jalankan pada browser masing-masing jika benar maka seperti tampilan dibawah ini:
- 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