Untuk kali kita akan coba belajar cara mengacak putaran suatu bentuk dengan Javascript, dimana nantinya saya mempunyai suatu bentuk yang bisa kita acak perputarannya, tentunya kita bisa semua itu karena kita menggunakan javascript. seperti apa simak terus ya teman-teman.

Seperti biasa cara mengacak putaran suatu bentuk dengan Javascript saya masih menggunakan animejs karena masih banyak efek menarik yang ada disini, contohnya dengan control dari sebuah anime yang dinamakan set, kita bisa mensetting putaran bentuk yang kita punya, lalu untuk mencontohkan hal tersebut disini saya akan membuat sebuah bentuk bintang, lalu bentuk bintang tersebut. kita akan acak peputarannya, oke dari pada teman-teman tambah penasaran disini kita langsung saja.

saya mempunyai template seperti ini:

untuk mempercantik saya mengunakan sebuah bootstrap dan saya mempunyai 3 bintang, yang saya namakan sebagai id star, lalu jika sudah seperti itu berarti saya mempunyai sebuah css untuk mempercantik id tersebut, oke untuk membuat bentuk bintang kita harus membuat cssnya seperti ini:

 

Cukup panjang memang untuk kita membuat sebuah bentuk bintang tidak apa, jika tampilan template sudah selesai, kita langsung saja membuat controll set yang ada di animejs seperti ini

teman-teman silahkan focus kepada translatex dan rotatenya, disini saya mengguankan sebuah button untuk mengganti sebuah posisi bentuk bintang yang kita punya, dan jika kita coba gabungkan semua kodingan di atas, maka teman-teman akan mendapatkan hasil yang kita inginkan seperti ini:

cara mengacak putaran suatu bentuk dengan Javascript cara mengacak putaran suatu bentuk dengan Javascript

gambar di berbeda letak bintangnya benar, tetapi jika teman-teman perhatikan tidak hanya letak tetapi rotasi bintang tersebut pun berubah, jika tidak percaya silahkan coba sendiri, dan saya rasa cukup sampai disini belajar kita sampai jumpa pada artikel berikutnya.

WhatsApp chat