Untuk tutorial kali ini, saya akan membahasa tentang parallax gallery. Dengan menggunaka parallax gallery, kita dapat membuat web kita menampilkan gambar jika kita melakukan scroll ke bawah.
Langkah pertama yang harus dilakukan adalah, terlebih dahulu membuat file htmlnya. Disini saya menggunakan nama file Parallax Gallery.html. Setelah itu, cari gambar yang ingin kita tampilkan. Saya menggunakan 6 gambar disini.
Setelah itu, berikut codinganya:
Pertama - tama atur margin dan padding seluruh element
Setelah itu atur gallerynya
Setelah mengatur gallerynya, atur scrollnya
Setelah mengatur semuanya, kita masuk ke dalam bodynya
Setelah itu, Ketikkan coding di bawah ini untuk menampilkan gallerynya.
data-anchor-target digunakan untuk memberikan pengembang kebebasan untuk menggunakan elemen alternatif untuk modifikasi. Sedangkan data-100p-top-top sudah saya jelaskan di tutorial parallax yang sebelumnya.
Setelah itu, lanjutkan dengan coding di bawah ini
Setelah selesai, jangan lupa mengikut sertakan jquerynya sehingga parallax ini dapat di jalankan.
Untuk yang lebih lengkap, anda dapat mendownload filenya disini: https://www.dropbox.com/sh/ck7kqo7qehb7cd9/AAA77im6pUHC8qpTGRMvoWNoa?dl=0
Sekian, semoga bermanfaat.
No comments:
Post a Comment