Daftar Trik

Berikut adalah daftar trik yang pernah dikerjakan.
1. Ganti Warna Lingkaran dengan Timer

Ganti Warna Lingkaran dengan Timer

Coba

Dalam trik ini, saya secara periodik mengganti warna dari 16 lingkaran, yang berada dalam sebuah kotak.
Ini adalah beberapa poin penting untuk dapat menghasilkan trik ini:
  1. Buat sebuah element dengan border yang berperan sebagai kotak. Berikan nilai height dan width yang merupakan kelipatan 4 karena setiap baris dan kolom terdiri atas 4 lingkaran. Baik jumlah lingkaran maupun nilai height dan width dapat disesuaikan sesuai keinginan.
  2. Di dalam elemen kotak, buat sejumlah elemen kotak kecil yang akan menampung elemen lingkaran. Pastikan tidak ada spasi dalam code karena akan memunculkan jarak antar lingkaran nantinya.
  3. Lingkaran dibuat dengan memberi nilai border-radius pada css elemen lingkaran. Nilai border-radius yang diberikan adalah setengah dari width dan height elemen lingkaran.
  4. Berikan nilai z-index pada css elemen kotak dan lingkaran. Pastikan nilai z-index elemen lingkaran lebih besar dari elemen kotak.
  5. Gunakan javascript untuk merubah warna kotak atau lingkaran. Ubah nilai style.backgroundColor dari setiap lingkaran.
  6. Nilai warna yang digunakan adalah 17 warna default dari css.
  7. Gunakan fungsi timeout pada javascript untuk mengatur waktu.
  8. Menggunakan worker pada javascript, untuk memberikan kesan paralel.
Berikut adalah video dari trik tersebut.