Halo sobat Tutorial Ku pada kesempatan kali ini saya akan membuat tutorial tentang bagaimana Cara Membuat Form Animasi Dengan Jquery , Nah bagi anda yang tidak begitu suka dengan tampilan form yang biasa-biasa saja mungkin kalian bisa mengikuti tutorial saya kali ini ..
Karena saya akan menambahkan animasi pada form html menggunakan jquery yang akan sangat berguna untuk semakin mempercantik tampilan website kalian , Sekaligus anda dapat mengetahui sedikit tentang fungsi-fungsi pada jquery yang ada pada tutorial ini , Oke langsung saja kita simak tutorial berikut ini :
Langkah pertama adalah silahkan copy kode di bawah ini dan menyimpan nya dengan format index.html
Setelah kalian sudah membuat file index.html , Lalu sekarang kita tambahkan css untuk mempercantik tampilan form nya silahkan kalian copy kode di bawah ini dan simpan dengan nama file style.css
Selanjutnya adalah menambahkan kode jquery yang berfungsi untuk membuat animasi pada form yang sudah kita buat , Silahkan Copy kode jquery di bawah ini dengan nama formanimasi.jsNah sekarang coba kalian buka file index.html di browser kalian dan coba lihat hasil nya , Sangat mudah bukan dan tampilan formnya juga sangat elegan untuk melihat contoh hasil nya seperti apa kalian bisa coba lihat demo di bawah ini yang saya embed menggunakan codepen :
Oh ya sedikit penjelasan dari fungsi jquery yang ada pada tutorial ini , attribute " id " yang berada di bagian form itu bertujuan untuk membedakan masing-masing satu form dengan form lainnya ..
Dan adanya attribute " keyup(function(){ }); " Berfungsi untuk mendeteksi ketika tombol keyboard di tekan , Dan kalau attribute " slideDown(); " Berfungsi untuk memberikan animasi slide kebawah ,
Untuk penjelasan lengkap nya kalian bisa membaca dokumentasi nya di JQuery Api di situ kalian juga bisa melihat macam macam animasi yang tersedia dan pastinya sangat cool :D
EmoticonEmoticon