Untuk tutorial kali ini, saya akan membahas tentang tutorial parallax untuk membuat gambar yang berputar.
Pertama - tama buat file htmlnya terlebih dahulu. Disini saya menamakannya Image Spinning.html.
Setelah itu, cari gambar yang akan di gunakan, saya menggunakan 4 gambar disini.
Setelah itu, ikuti coding di bawah ini. Codingnya tidak jauh berbeda dengan yang sebelum sebelumnya, cuman yang membedakan disini hanya pada bagian transformationnya.
Seperti biasa, atur terlebih dahulu margin dan padding untuk semua element.
Setelah itu , atur isinya.
Setelah mengatur isinya, atur kelas anggotanya
Setelah selesai melakukan pengaturan yang di atas, kita dapat mengisi bodynya
Di lanjutkan dengan div kelas anggota.
Seperti yang sudah di jelaskan sebelumnya, kita memerlukan data-150-bottom-center dan transform serta opacity untuk efek parallaxnya.
Dan yang paling penting, jangan lupa mengikut sertakan jquerynya sehingga parallax ini dapat di jalankan.
Untuk yang lebih jelasnya, anda dapat mendownload filenya disini : https://www.dropbox.com/sh/p9ggo6l4ww77xz0/AACJxx4jpJMiBUl90C87sb4oa?dl=0
Sekian dan Terimakasih. Semoga Bermanfaat.
No comments:
Post a Comment