Membuat Animasi Pada Form HTML dengan JQuery

Assalammualaikum Wr. Wb.

Kali ini saya akan sharing mengenai cara membuat Animasi yang daoat diterapkan di form HTML dengan salah satu Library Javascript yaitu JQuery. bagaimana caranya?....simak pembahasan berikut ini...

A. PENDAHULUAN

Pengertian

Animasi merupakan sebuah efek yang digunakan untuk membuat suatu aplikasi menjadi lebih menarik.

Latar Belakang

Ingin Mempercantik tampilan Form dan juga membuat website menjadi lebih hidup.

Maksud dan Tujuan

Dapat membuat form dengan memberikan efek animasi Javascript.

B. ALAT DAN BAHAN

Text Editor.
JQuery (salah satu library Javascript).
sedikit pengetahuan mengenai HTML, CSS, dan Javascript.
Web Browser.

C. JANGKA WAKTU PELAKSANAAN

Sekitar 1-2 jam untuk menyelesaikan Animasi ini (mulai dari pemahaman logika penulisannya hingga prakteknya).

D. RANGKAIAN KEGIATAN

Definisi Animasi

Animasi merupakan sebuah efek yang digunakan untuk mempercantik sebuah tampilan dari sebuah aplikasi. di JQuery ini, anda dapat menggunakan animasi keyup untuk diterapkan pada Form HTML

Menerapkan Animasi pada Form HTML

pertama tama kita buat indexnya, index ini berfungsi sebagai tampikan sebuah website.

kita panggil file Bootstrap dan JQuery serta CSSnya dengan script sebagai berikut.

kemudian kita buat formnya dengan script berikut.

setelah itu kita ketikkan script JQuery untuk memanggil animasinya yaitu keyup functionnya

kemudian kita buat file css nya yang digunakan untuk menyembunyikan elemen div tertentu yang telah kita namai id nya dan kita buat ketentuan id nya

kenapa pada display kita beri value none?. karena hal tersebut untuk menyembunyikan elemen tertentu sebelum kita mengklik form yang ditentukan.

setelah itu kita coba cek di browser, maka tampilan awalnya akan menjadi seperti ini.

dan saat kita mengklik form nya, dan kita isi formnya, maka akan muncul efek sliding yang didalamnnya terdapat form form selanjutnya....hingga akhirnya menjadi seperti ini...