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
bounceflashpulse
rubberBandshakewobble
headShakeswingtada
bounceInLeftbounceOutDownfadeIn
jellobounceInbounceInDown
bounceInRightbounceInUpbounceOut
bounceOutLeftbounceOutRightbounceOutUp
fadeInDownfadeInDownBigfadeInLeft
fadeInLeftBigfadeInUpBigfadeOutLeft
fadeInRightfadeInRightBigfadeInUp
fadeOutfadeOutDownfadeOutDownBig
fadeOutLeftBigfadeOutRightfadeOutRightBig
fadeOutUpflipOutXrotateIn
fadeOutUpBigflipInXflipInY
flipOutYlightSpeedInlightSpeedOut
rotateInDownLeftrotateInDownRightrotateInUpLeft
rotateInUpRightrotateOutUpLeftrollIn
rotateOutrotateOutDownLeftrotateOutDownRight
rotateOutUpRighthingejackInTheBox
rollOutzoomInzoomInDown
zoomInLeftzoomOutDownslideInDown
zoomInRightzoomInUpzoomOut
zoomOutLeftzoomOutRightzoomOutUp
slideInLeftslideInRightslideInUp
slideOutLeftslideOutRightslideOutUp
heartBeatslideOutDown 

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  Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP

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.

Live Demo
Baca Juga  Cara Install Apache, MySQL dan PHP di Ubuntu 18.04 LTS

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 …

[Total: 2    Average: 5/5]

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 6 Comments

  1. Alhamdulillah… tutorialnya sangat simple, padat dan sangat mudah diterapkan…

  2. Terimakasih, pembelajaran yg sangat bermanfaat…

Tinggalkan Balasan

Close Menu