Menambahkan Animasi pada Icon atau Elemen Blog

Menambahkan Animasi pada Icon atau Elemen Blog

Menambahkan Animasi pada Icon atau Elemen Blog

Adakalahnya kita ingin menambahkan animasi pada ikon atau elemen blog/website tertentu sehingga dapat mempercantik tampilan website atau blog kita.


Animasi merupakan objek atau elemen yang tersusun atas frame atau dapat berupa gambar juga dengan jumlah dan posisi tertentu sehingga apabila diputar/play akan menghasilkan ilusi gerakan.


Sebenarnya ada banyak cara untuk memperindah atau mempercantik tampilan suatu website atau blog, baik dengan memodifikasi template, menambahkan beberapa css yang diperlukan, menambahkan widget atau yang kali ini kita akan bahas yaitu dengan menambahkan animasi.


Menambahkan animasi dengan animate.css


Cara menambahkan animasi yang kita akan bahas kali ini adalah dengan menggunakan library dari animate.css. Untuk situsnya sendiri kalian bisa kunjungi disini atau https://animate.style/.


Langkah pertama yang harus kalian lakukan adalah menambahkan library animate.css ke dalam website atau blog kalian. Salin atau copy kode dibawah ini kemudian tempatkan setelah tag <head> .


<link href='https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css' rel='stylesheet'/> 


Setelah langkah diatas selesai, berikutnya adalah kalian tinggal menentukan elemen mana pada website atau blog yang akan ditambahkan dengan animasi. Misalkan kalian ingin menambahkan animasi pada ikon website atau blog kalian maka cukup cari elemen ikon tersebut.


Misal dari kode ini:


<div class='header-logo'>


Menjadi kode berikut:


<div class='header-logo animate__heartBeat'>


Kode animasi lainnya


Selain kode animate__heartBeat diatas banyak lagi kode lain yang bisa kalian coba dan tentunya animasinya tak kalah bagus dan keren. Beberapa contoh kode lainnya yaitu:


Attention seekers


bounce

flash

pulse

rubberBand

shakeX

shakeY

headShake

swing

tada

wobble

jello

heartBeat


Back entrances


backInDown

backInLeft

backInRight

backInUp


Back exits


backOutDown

backOutLeft

backOutRight

backOutUp


Untuk lebih lengkapnya kalian bisa ke situsnya langsung, masih banyak kode animasi yang ada di situsnya.


Menambahkan delay atau jeda animasi


Adakalahnya juga kita ingin menambahkan delay atau jeda pada elemen yang kita beri atau tambahkan animasi. Misalkan elemen yang kita hendak berikan animasi adalah gambar maka akan lebih baik jika diberikan delay atau jeda. 


Hal ini bertujuan agar elemen gambar yang kita berikan animasi tersebut supaya selesai di load terlebih dahulu. Adapun langkah-langkah menambahkan delay atau jeda pada animasi dengan animate.css adalah sebagai berikut.


Disini admin contohkan kode ikon yang tadi maka hanya perlu ditambahkan beberapa kode yaitu animate__animated dan animate__delay-2s sehingga kodenya menjadi seperti dibawah ini.


<div class='header-logo animate__animated animate__heartBeat animate__delay-2s'>


Demikian tutorial singkat bagaimana caranya menambahkan animasi pada icon atau elemen web atau blog. Semoga bermanfaat.