Cara Mengaplikasikan Animasi Scroll di HTML Site

image taken from sitepoint.com

Jadi kamu sudah membuat websitemu dengan HTML dan sekarang lagi mikir untuk kasih user experience yang lebih keren lagi dengan animasi. Di tutorial ini aku akan menunjukanmu caranya mengaplikasikan animasi scroll di HTML site yang sederhana. Kebetulan tutorial ini sempat diajarkan di program Winter Club Generation Girl December 2018 lalu :)

Kamu bisa mengunduh contoh proyek melalu link ini untuk referensi. Tapi aku akan tunjukin kamu juga cara bikinnya dari awal.

Yuk mulai :)

1. ) HTML + CSS

Kamu akan membuat HTML site yang mempunyai gambar dengan jarak yang berjauhan dengan kata-kata di paling bawah site ini.

Penjelasan lebih lanjut mengenai kode diatas:

• Kita mempunyai 2 files: HTML dan CSS
• HTML mempunyai referensi ke custom.css file yang mempunyai rincian bagaimana <div> yang kita gunakan untuk text akan berjarak berapa.
• HTML file ini juga mempunyai referensi ke jQuery dan main.js file yang mempunyai kode animasi kita.

2.) jQuery script

Animasi akan berupa seperti ini: ketika kamu menekan gambar, dia akan scroll ke text kita secara perlahan tau dengan waktu tertentu.

Apa yang terjadi diatas:

• Kita mempunyai dua constants: pictureBox dan messageBox. Constants kita mempunyai referensi ke dua elemen di HTML file kita.
• Ada .click function yang kita bisa pakai dari jQuery. Kita menggunakan fungsi ini pada pictureBox constant kita.
• Ada fungi .animate yang bisa kita pakai untuk membuat efek animasi pada property CSS kita. Disini, kita menganimasi elemen di body section dari HTML file kita.

Jangan lupa save pekerjaan kita dan run index.html file di browser (sisal: Chrome). Kamu mestinya sudah bisa melihat efek scroll setelah menekan gambar.

Voila!

Kalau kamu senang dengan tutorial ini, ikuti kita ya di Generation Girl :)