Kamis, 31 Desember 2020

Rayakan Tahun Baru 2021 Menggunakan Animasi Konfeti Keren di Website

Tags

ARSPuja Labs - Mari merayakan pergantian tahun dengan memasang animasi konfeti di website kita.

Yang belum mengetahui apa itu konfeti, Konfeti adalah beragam potongan kertas, milar atau bahan logam yang biasanya dilemparkan pada parade dan pesta.


image: ARSPuja Labs

Yups singkatnya konfeti adalah kertas berterbangan yang biasa digunakan saat acara perayaan.


Membuat Animasi Kertas Berterbangan (Konfeti) di Website


Dalam kesempatan kali ini saya akan membagikan sebuah kode javascript yang dapat menampilkan animasi kertas berterbangan layaknya perayaan pesta.


Bertepatan pada perayaan tahun baru online 2021 yang saat ini masih diterpa pandemi, mari kita rayakan menggunakan animasi di website.


Kode JavaScript ini menggunakan library yang bernama "Confetti.Js", hanya menggunakan satu file saja bisa menampilkan animasi yang luar biasa meriah.


Tidak perlu berlama-lama mari kita lanjut ke proses pemasangan dan pembuatan animasi konfeti:


Langkah Membuat Animasi Kertas Berterbangan (Konfeti) di Website


1. Salin/Copy kode berikut ini:
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvas-confetti/1.4.0/confetti.min.js"></script>
<script>confetti.start(); setInterval(function(){ confetti.stop(); }, 8000);</script>


2. Buka kode tema blogger anda, atau buka script footer.php di dalam folder theme bagi pengguna wordpress


3. Cari kode "</body>" lalu pastekan / taruh kode yang tadi di salin pada langkah 1, di atas kode "</body>" tersebut.


4. Simpan dan selesai


Jika berhasil anda akan melihat animasi seperti ini

Keterangan Tambahan:

Pada kode di atas terdapat angka 8000 yang berarti pada hitungan ke 8 detik maka animasi akan hilang dengan sendirinya, kalian bisa menambah atau mengurangi durasi sesuai selera.

Sekarang coba akses situs web atau blog anda, dan lihat animasi kertas berterbangan akan keluar secara otomatis setiap kali membuka halaman atau konten.


Nah, jika kalian ingin menghentikan animasi cukup hapus kode tersebut setiap saat.


Itu yang dapat saya bagikan tentang, Rayakan Tahun Baru 2021 Menggunakan Animasi Konfeti Keren di Website

2 komentar


Silahkan berkomentar dengan sopan dan tidak mengandung unsur SARA sesuai topik artikel diatas. Diluar itu komentar anda akan penulis hapus. Terimakasih :)
EmoticonEmoticon