Sekaranglah saatnya kita bermain script jquery yang di padukan dengan CSS3. Di sini fungsi CSS3 hanya untuk memodifikasi gambar yang akan kita buat berjalan.Tutorial ini saya dapatkan di
http://jquery.com
namun di sini sedikit di kembangkan. Tutorial kali ini kita akan membahas bagaimana membuat gambar berjalan dengan bantuan jquery, CSS3 dan gambar tersebut akan kembali lagi dengan gambar yang berbeda, di sini sobat juga bisa menghentikan gambar untuk melihat animasi berikutnya, bisa menambahkan fungsi hover dengan scale, skew, blur, atau yang lainnya itu semua tergantung kreasi dari sobat. Untuk melihat animasi yang tercipta antara jquery dan css3 sobat bisa melihat contoh di bawah dengan mengklik tombolnya. Silahkan di coba terlebih dahulu sebelum kita membahasnya, siapa tau sobat tertarik ingin membuatnya.Apabila sobat tertarik ingin membuatnya silahkan masukan kode di bawah di dalam postingan, di edit html bukan di compose. Setelah itu di preview terlebih dahulu untuk melihat hasilnya karena siapa tau sobat ingin berkreasi yang lain.
KETERANGAN DARI KODE JQUERY:
Seperti contoh di atas apabila sobat mengklik Jalankan! maka gambar akan berjalan ke kanan, Nah.. di situ sobat bisa berkreasi seberapa jauh gambar itu berjalan dan kembali lagi. Silahkan amati kode dibawah:
.animate({left:'+=900'},5000);
Kode tersebut sobat bisa ganti valuenya di +=900 apabila semakin besar maka gambar akan bergerak semakin jauh. Untuk css3nya sobat bisa berkreasi sendiri. Selamat mencoba, semoga bermanfaat dan berguna.
"Membuat animasi gambar berjalan dengan CSS3 dan Jquery"
Tidak ada komentar:
Posting Komentar