Hai teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, nah kita lanjut lagi ya belajarnya, pada kesempatan kali ini kita akan membuat satu studi kasus, yaitu kita akan mencoba membuat banner dengan animasi text unik dengan jquery.

Untuk lebih jelasnya kita langsung saja praktekan, Pertama silahakan teman-teman buat sebuah file dan ketikan script berikut ini:

Saya membuat beberapa element span dengan kata “terbaik dan nomor satu” yang saya berikan class masing masing, lalu sekarang coba teman-teman tambahkan script css berikut ini:

Saya mengatur kata-perkata dengan pengaturan css yang bisa teman-teman liat seperti diatas, saya meletakan semua text berada diluar div, jadi jika teman-teman save maka hasilnya akan seperti berikut ini:

membuat banner dengan animasi text unik dengan jquery1

Hsilnya hannya kotak kosong karena text-textnya saya sudah letakan diluar div tersebut dengan menggunakan css position, nah jika sudah teman-teman silahkan tambahkan script jquery berikut ini untuk membuat animasi pada textnya, silahakan ketikan script berikut ini:

sekarang coba teman-teman save lalu reload browsernya, akan muncul text dengan banyak animasinya, yang jika dijalankan maka hasilnya seperti ini:

membuat banner dengan animasi text unik dengan jquery2

Gimana teman-teman cukup mudah bukan membuat banner dengan animasi text unik dengan jquery, saya rasa tutorial kali ini cukup sampai disini dulu, sampai bertemu lagi pada tutorial berikutnya.

Terima Kasih.