Daftar Isi :
- Membuat Design Tampilan Web
- Proses Animasi ScrollTop
Assalamu'alaikum Wr. Wb.
Salam untuk semua, Alhamdulillah kali ini saya ingin berbagi artikel kepada kalian yaitu tentang Animation ScrollTop in Web use JQuery - JQuery Animation. Cara membuat Animasi ScrollTop ini sangat mudah dan dapat di coba untuk kalian yang belum pernah mencoba. untuk materi pada artikel kali ini sudah saya sebutkan di atas yang terdapat pada daftar isi.
Ok apa sih yang bikin menarik untuk membuat Animasi Scroll ini, Untuk Animasi Scroll ini biasa nya di gunakan sebagian besar Developer untuk mempercantik tampilan dengan menambahkan sedikit animasi pada Aplikasi yang mereka buat. Ok kita langsung saja ke proses pembuatan Animasi Scroll.
1. Membuat Design Tampilan Web
Di proses pertama ini kita akan membuat Design tampilan web nya, untuk tampilannya terserah kalian sesuai dengan kesukaan kalian, dan disini saya akan memberi contoh tampilan simple dan kalian bisa kembangin lagi untuk tampilannya,
Example :
Setelah kita membuat kerangka HTML-nya kita buat CSS-nya untuk mempercantik tampilannya, di sini saya memakai CSS biasa dan kalian pasti dapat memahami dengan mudah.dan ini saya akan masukkan contoh design CSS yang sangat simple dan sederhana, kalian bisa mengembangknnya sesuai keinginan kalian.
Example :
Jadi untuk script akhir dari tampilan design di atas seperti ini :
Example :
Setelah kita membuat kerangka HTML-nya kita buat CSS-nya untuk mempercantik tampilannya, di sini saya memakai CSS biasa dan kalian pasti dapat memahami dengan mudah.dan ini saya akan masukkan contoh design CSS yang sangat simple dan sederhana, kalian bisa mengembangknnya sesuai keinginan kalian.
Example :
Jadi untuk script akhir dari tampilan design di atas seperti ini :
2. Proses Animasi ScrollTop
Untuk proses kedua ini kita akan membuat proses Animasi Scroll -nya dengan JQuery. Sebelumnya kalian siapkan JQuery nya terlebih dahulu pakai jquery.js atau jquery.min.js. untuk proses kalian bisa lihat code Javascript saya di bawah ini :
Example :
Setelah selesai semua nya maka Script Akhir dari semua proses satu dan dua.
Oke setelah selesai semua kalian bisa save dan jalankan di browser semoga berhasil teman,, Salam Coding.
Terima Kasih sudah mau berkunjung di blog saya jika ada kesalahan kata atau tulisan saya mohon maaf, dan jangan lupa baca artikel lainnya dan semoga bermanfaat untuk kalian semua :D.
Wassalamu'alaikum Wr. Wb.
No comments:
Post a Comment