Pada kesempatan kali ini saya akan menjelaskan cara membuat animasi bola naik dan turun dengan javascript. Perlu teman-teman ketahui sebelumnya, untuk animasi bola tersebut yang nantinya akan dibuat adalah element circle yang diberi dengan border radius 50% sehingga membentuk bulat seperti bola. Kemudian dari element circle tersebut apabila di hover atau disorot dengan mouse akan bergerak turun dan naik dengan sendirinya. Tentunya dari animasi tersebut dibutuhkan suatu property css transform supaya element cycle tersebut bisa berjalan kebawah dan keatas.

Selain menggunakan property css transform tersebut, nantinya dibutuhkan pula property css transition yang ditambahkan melalui javascript beserta dengan opacity nya. Sebenarnya selain dengan property css tersebut ada beberapa metode lagi yang bisa di terapkan salah satunya menggunakan methode setInterval javascript yang dapat menjalankan suatu event secara berulang-ulang dan nantinya akan berhenti menggunakan methode clearTimeout. Untuk membuatnya langsung saja teman-teman bisa ikuti tahapan yang saya berikan di bawah ini.

Berikut Tahapannya :

  • Teman-teman buat terlebih dahulu satu buah file dengan nama index.html, dan ketikan kode seperti berikut.

  • Selanjutnya teman-teman save file tersebut terlebih dahulu.

Note :

  1. Seperti yang terlihat pada kode mouseenter adalah untuk event ketika mouse diarahkan ke element cyrcle tersebut maka element cyrclenya akan turun ke bawah.
  2. Seperti yang terlihat pada kode mouseleave adalah untuk event ketika mouse dilepas dan element cyrcle tersebut akan naik keatas.

Sampai disini penjelasan saya mengenai cara membuat animasi bola naik dan turun dengan javascript, semoga bermanfaat.