Untuk hari ini kita akan mencoba bermain dengan sebuah animasi, dimana animasi yang akan kita buat kali ini adalah animasi yang berputar-putar, tentunya untuk membuat seperti itu kita membutuhkan sebuah javascript ya, seperti apa cara membuat animasi kotak berputar-putar simak terus ya teman-teman.

cara membuat animasi kotak berputar-putar jika dilihat dari judulnya kita akan membayangkan apakah susah membuat seperti itu, disini tidak ya teman-teman karena disini saya akan menggunakan sebuah library yang tidak sengaja saya temukan menurut saya ini bagus sekali karena banyak animasi-animasi yang bisa kita coba, silahkan teman-teman lihat saja di animejs.com disini saya akan mencoba membuat sebuah kotak yang berputar oke langsung saja. disini saya akan membuat sebuah template seperti ini

Oke jika sudah saya akan memberikan CSS seperti ini supaya lebih cantik

oke jika sudah jika di lihat dari sebuah templatenya saya memprosesnya di sebuah main.js ya, maka dari kita buat main.js lalu kita buat prosesnya

Cukup panjang ya, karena setiap anime itu satu box atau satu kotak dimana ada

  • target: target dari box nya
  • translateY: untuk mengatur kapan efek animasi itu berkerja focus kepada delanya ya
  • rotate: berapa kali kotak itu mejankan animasinya disini saya coba satu kali

jika kita lihat maka hasilnya akan seperti ini

cara membuat animasi kotak berputar-putar

jika teman-teman refresh maka kota akan berjatuhan seperti yang sudah kita setting di atas, oke, saya rasa cukup sampai disini belajar kita tentang cara membuat animasi kotak berputar-putar semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.

WhatsApp chat