Detri Amelia Chandra
  • HOME
  • GIS
  • HTML
  • Bootstrap
  • CSS
  • Javascript
  • Ubuntu
  • Useful Tools
    • URL Redirect Tool
    • URL Download Encryptor
No Result
View All Result
Detriamelia.com
  • HOME
  • GIS
  • HTML
  • Bootstrap
  • CSS
  • Javascript
  • Ubuntu
  • Useful Tools
    • URL Redirect Tool
    • URL Download Encryptor
No Result
View All Result
Detriamelia.com
No Result
View All Result

Beautify Bootstrap Modal Animation With Animate.CSS

02/04/2019
in Bootstrap, CSS, HTML, PHP
Beautify Bootstrap Modal Animation With Animate.CSS

Beautify Bootstrap Modal Animation With Animate.CSS

Bootstrap has many beautiful features. One of the most familiar bootstrap features is Modal. For those who don’t know what modal is, modal is a popup menu provided by Bootstrap. With the modal, it is no longer difficult for us to make a minimalist responsive popup again.

Modal bootstrap itself actually already has a default animation that is fade animation. For those of you lovers of design, of course it is very boring if the animation shown is all. Well, this time we will discuss how to enhance your boostrap modal with Animate.Css.

Get straight to the point of the discussion, please visit https://daneden.github.io/animate.css/ to see examples of what animations are available. Now for more details, I’ll just show the table. Is as follows :

Animation Code
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  

Beautify Bootstrap Modal Animation With Animate.CSS

And for implementation, please add animate class followed by the type of animation. Example: <div class = “animate rollIn”> </div>. For application to bootstrap modal, please pay attention to the following modal code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContoh"&gt;
  Klik Saya
&lt;/button&gt;
&lt;div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;
&lt;div class="modal-dialog" role="document"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-header bg-dark text-light"&gt;
&lt;h5 class="modal-title"&gt;Contoh Modal&lt;/h5&gt;
&lt;button type="button" class="close text-light" data-dismiss="modal" aria-label="Close"&gt;
  &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
Isi modal
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Tutup&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;

look at this syntax :

1
&lt;div class="modal fade" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;

change ‘fade’ with “animate (animation type)”, for example, rollIn animation, while chance becoming :

1
&lt;div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;

So if we apply directly with all css and js bootstrap, then the complete coding is as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;meta charset="utf-8"&gt;
&lt;meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"&gt;
&lt;meta name="description" content="Integrasi Modal Bootstrap dengan Animate.css"&gt;
&lt;meta name="author" content="Detri Amelia Chandara"&gt;
&lt;meta name="generator" content="Jekyll v3.8.5"&gt;
&lt;title&gt;Percantik Animasi Modal Bootstrap dengan Animate.css&lt;/title&gt;
&lt;link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"&gt;
&lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"&gt;
&lt;/head&gt;
&lt;body class="bg-light"&gt;
&lt;div class="container text-center mt-3 pt-3"&gt;
&lt;button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalContoh"&gt;
  Klik Saya
&lt;/button&gt;
&lt;div class="modal animated rollIn" id="modalContoh" tabindex="-1" role="dialog" aria-hidden="true"&gt;
&lt;div class="modal-dialog" role="document"&gt;
&lt;div class="modal-content"&gt;
&lt;div class="modal-header bg-dark text-light"&gt;
&lt;h5 class="modal-title"&gt;Contoh Modal&lt;/h5&gt;
&lt;button type="button" class="close text-light" data-dismiss="modal" aria-label="Close"&gt;
  &lt;span aria-hidden="true"&gt;×&lt;/span&gt;
&lt;/button&gt;
&lt;/div&gt;
&lt;div class="modal-body"&gt;
Isi modal
&lt;/div&gt;
&lt;div class="modal-footer"&gt;
&lt;button type="button" class="btn btn-secondary" data-dismiss="modal"&gt;Tutup&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;footer class="my-5 pt-5 text-muted text-center text-small"&gt;
&lt;p class="mb-1"&gt;© 2019 Detri Amelia Chandra&lt;/p&gt;
&lt;/footer&gt;
&lt;script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="//code.jquery.com/jquery-1.10.2.min.js"&gt;&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
 

Please copy and see the results, don’t forget if you want to change the animation type, please change the bounce to another animation type.

[the_ad id=”651″]

Live Demo

Download Source Code

Hopefully this article is useful about beautifying the bootstrap modal animation with this animate.css. Please share, don’t forget to comment if there is something you don’t understand …

Tags: BootstrapCSSHTML
ShareTweetShare

Related Posts

PHP Forms - Validation With Required Fields
PHP

14. PHP Forms – Validation With Required Fields

Hi everyone, this time we will discuss about PHP Validation using the Required Field. Not many people know, it turns...

15/02/2020
PHP Form Handling
PHP

13. New Performing PHP Form Handling

Detriamelia.Com - Running form functions in PHP is not difficult. By using the $ _POST and $ _GET methods it...

13/02/2020
Learn PHP Global Variables - Superglobals With Example
PHP

12. Learn PHP Global Variables – Superglobals With Example

On this occasion, we will discuss Global and Superglobal Variables. These variables are some that are very important to implement....

20/01/2020
PHP Array Example, Complete Editions
PHP

11. PHP Array Example, Complete Editions

Welcome back to the PHP programming learning page. This time we will discuss arrays, more precisely arrays in PHP. Arrays...

17/01/2020
Next Post
Application of Jquery Mask to Numbers in HTML and PHP Forms

Application of Jquery Mask For Numbers in HTML and PHP Forms

Prevent XSS Injection Attacks On PHP Easily

Prevent XSS Injection Attacks On PHP Easily

Comments 6

  1. Detri Amelia Chandra says:
    6 years ago

    Komentarin aja ya, jangan malu malu…

    Reply
  2. Pingback: Penerapan Jquery Mask Untuk Angka Pada Form HTML dan PHP - Detri Amelia Chandra
  3. Rahmat Hidayat says:
    6 years ago

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

    Reply
    • Detri Amelia Chandra says:
      6 years ago

      Alhamdulillah, semoga membantu 🙂

      Reply
  4. Nesya says:
    6 years ago

    Terimakasih, pembelajaran yg sangat bermanfaat…

    Reply
    • Detri Amelia Chandra says:
      6 years ago

      Terimakasih sudah berkunjung… 😀

      Reply

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

Recommended

PHP Syntax, Variables and PHP Echo/Print

4. PHP Syntax and PHP Variables

29/11/2019
Adding Modern and Beautiful Link Effects with CSS3

Adding Modern and Beautiful Link Effects with CSS3

31/07/2019
Understanding PHP Condition If Else, Elseif Statements

7. Understanding PHP Condition If Else, Elseif Statements

15/01/2020
PHP Forms - Validation With Required Fields

14. PHP Forms – Validation With Required Fields

15/02/2020

Instagram Feed

    The Instagram Access Token is expired, Go to the Customizer > JNews : Social, Like & View > Instagram Feed Setting, to refresh it.
  • HOME
  • GIS
  • HTML
  • Bootstrap
  • CSS
  • Javascript
  • Ubuntu
  • Useful Tools
Detriamelia.Com

© 2022 Detri Amelia Chandra - IT Tips and Programming Tutorials.

No Result
View All Result
  • HOME
  • GIS
  • HTML
  • Bootstrap
  • CSS
  • Javascript
  • Ubuntu
  • Useful Tools
    • URL Redirect Tool
    • URL Download Encryptor