Percantik Animasi Modal Bootstrap Dengan Animate.CSS
Percantik Animasi Modal Bootstrap Dengan Animate.CSS

Percantik Animasi Modal Bootstrap Dengan Animate.CSS

Bootstrap memiliki banyak sekali fitur cantik. Salah satu fitur bootstrap yang paling familiar adalah Modal. Bagi yang belum mengetahui apa itu modal, modal adalah menu popup yang disediakan oleh bootstrap. Dengan adanya modal, tidak sulit lagi bagi kita untuk membuat popup yang minimalis lagi responsive.

Modal bootstrap sendiri sebenarnya sudah memiliki animasi bawaan yaitu animasi fade. Bagi anda pecinta design, tentu saja sangat membosankan jika animasi yang ditampilkan itu-itu saja. Nah, kali ini kita akan membahas bagaimana mempercantik modal boostrap dengan Animate.Css.

Langsung saja ke inti pembahasan, silahkan anda kunjungi https://daneden.github.io/animate.css/ untuk melihat contoh animasi apa saja yang tersedia. Nah untuk lebih detailnya, saya tampilkan saja deh tabelnya. Adalah sebagai berikut :

Kode Animasi
bounce flash pulse
rubberBand shake wobble
headShake swing tada
bounceInLeft bounceOutDown fadeIn
jello bounceIn bounceInDown
bounceInRight bounceInUp bounceOut
bounceOutLeft bounceOutRight bounceOutUp
fadeInDown fadeInDownBig fadeInLeft
fadeInLeftBig fadeInUpBig fadeOutLeft
fadeInRight fadeInRightBig fadeInUp
fadeOut fadeOutDown fadeOutDownBig
fadeOutLeftBig fadeOutRight fadeOutRightBig
fadeOutUp flipOutX rotateIn
fadeOutUpBig flipInX flipInY
flipOutY lightSpeedIn lightSpeedOut
rotateInDownLeft rotateInDownRight rotateInUpLeft
rotateInUpRight rotateOutUpLeft rollIn
rotateOut rotateOutDownLeft rotateOutDownRight
rotateOutUpRight hinge jackInTheBox
rollOut zoomIn zoomInDown
zoomInLeft zoomOutDown slideInDown
zoomInRight zoomInUp zoomOut
zoomOutLeft zoomOutRight zoomOutUp
slideInLeft slideInRight slideInUp
slideOutLeft slideOutRight slideOutUp
heartBeat slideOutDown

Percantik Animasi Modal Bootstrap Dengan Animate.CSS

Dan untuk penerapannya, silahkan anda tambahkan class animate diikuti dengan jenis animasinya. Contoh: <div class=”animate rollIn”></div>. Untuk penerapannya ke modal bootstrap, silahkan anda perhatikan kode modal berikut :

Perhatikan pada syntax :

Baca Juga  Menangkal Serangan XSS Injection Pada PHP Dengan Mudah

Silahkan ganti fade dengan “animate (jenis animasi)”, sebagai contoh, animasi rollIn, maka setelah diganti menjadi :

Maka jika kita terapkan langsung dengan seluruh css dan js bootstrap, maka kodingan lengkapnya adalah sebagai berikut :

Silahkan anda copy dan lihat hasilnya, jangan lupa jika ingin merubah type animasinya, silahkan ubah bounce menjadi jenis animasi lainnya.

Baca Juga  Mudah Membaca Nomor Induk Kependudukan (NIK) Dengan PHP Terbaru


Live Demo

Download Source Code

Semoga bermanfaat artike tentang mempercantik animasi modal boostrap dengan animate.css ini. Silahkan share ya, jangan lupa komen kalau ada yang belum dimengerti …

Detri Amelia Chandra

Halo, perkenalkan saya Detri Amelia Chandra. Bidang keahlian saya di Analisis Sistem, Perancangan Database, Jaringan Saraf Tiruan dan sedikit di Pemrograman. Simak pemikian saya soal dunia di blog saya ini ya. Blog ini saya update agak jarang, jadi sering-sering saja mampir hehe...

This Post Has 2 Comments

Tinggalkan Balasan

Close Menu