Kemarin kita sudah belajar bagaimana cara membuat sebuah kotak yang berputar-putar, untuk artikel kali ini kita akan menambahkan sedikit atau lebih tepatnya mengedit kotak yang berputar kita kemarin, dimana kita akan mencoba memplay dan mem berhentikan kotak yang berputar tersebut dimana ketika kita pilih salah satu tersebut maka kotak itu akan mengikuti prosesnya, jadi seperti apa Cara Membuat efek Play Pause Animasi Kotak berputar.

untuk itu disini kita akan menambahkan sebuah button play dan pause dimana fungsinya sudah saya jelaskan di atas ya, dan karena kita masih berhubungan dengan yang kemarin maka dari itu silahkan teman-teman buka file yang kemarin dan silahkan edit sama seperti yang saya punya ini, ada beberapa yang saya tambahkan sebelum teman-teman menambahkannya diantaranya:

  • tombol button play dan pause
  • ada css untuk tombol button tersebut
  • dan yang terakhir main.js nya untuk mengatur tombol tersebut

oke langsung saja buka template yang kemarin sudah kita buat lalu tambahkan buttonya seperti ini

dan ini saya buat sebuah fontawesome untuk sebuah icon di buttonya, oiya cara ini saya temukan di akun youtube Traversy Media silahkan lihat banyak yang bisa kita coba disana ya, oke jika sudah buat seperti di atas, dan untuk cssnya kitapun tambahkan ya seperti ini

teman-teman silahkan focus pada style buttonya saja, jika sudah, sekarang kita masuk ke main.js nya, untuk main.js nya kita rubah seperti ini

bisa dilihat ketika button plau di klik maka akan play dan pause akan stop seperti gambar di bawah ini

Cara Membuat efek Play Pause Animasi Kotak berputar

bagaimana silahkan teman-teman coba sendiri, menarik bukan, dan saya rasa cukup sampai disini belajar kita tentang cara membuat efek play dan pause animasi kotak yang berputar semoga bermanfaat dan sampai jumpa pada artikel berikutnya terimakasih.