How to Make Animate.css Sandbox With HTML, CSS and JS

in #programming7 years ago


Hi Everyone


NOW I will represent how to make Animate.css Sandbox


1.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


2.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


3.png


U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


Code HTML & JS


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, 
     initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
    <script src="script.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" 
     href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-
   alpha.6/css/bootstrap.min.css" integrity="sha384-
    rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
        crossorigin="anonymous">
</head>
<body>
    <div class="container">
        <header class="animated slideInDown text-center bg-primary text-white p-5">
            <h1 class="display-4">Animate.css Sandbox</h1>
        </header>
    
        <section id="section-1" class="animated slideInLeft bg-faded p-5 my-3">
            <h1>Section One</h1>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, repellat minima suscipit sapiente dolore inventore
                debitis maxime distinctio eaque dolores culpa aut ab, ipsum delectus adipisci dolorum perferendis iure et maiores
                sint obcaecati laboriosam ut nobis. Deleniti suscipit, ea non.</p>
        </section>
    
        <section id="section-2" class="animated slideInRight bg-faded p-5 my-3">
            <h1 id="anim-head">Section Two</h1>
            <p id="anim-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo, 
                  repellat minima suscipit sapiente dolore inventore
                debitis maxime distinctio eaque dolores culpa aut ab, ipsum delectus adipisci 
                dolorum perferendis iure et maiores
                sint obcaecati laboriosam ut nobis. Deleniti suscipit, ea non.</p>
           <button id="animateBtn" class="btn btn-primary">
                Animate
            </button>
    
          <button id="animateBtn2" class="btn btn-primary">
                Animate2
           </button>
        </section>
    </div>
    <script>
        $(function () {
                $('#animateBtn').click(function () {
                    animate('#anim-head', 'bounce');
                    animate('#anim-body', 'rubberBand');
                    return false;
                });

                $('#animateBtn2').click(function () {
                   animate('header', 'slideOutUp');
                setTimeout(function () {
                   $('header').css('visibility', 'hidden');
                    }, 1000);
                    return false;
                });

                // Animate
          function animate(element, animation) {
           $(element).addClass('animated ' + animation);
           var wait = setTimeout(function () {
           $(element).removeClass('animated ' + animation);
              }, 1000);
           }
        })
    </script>
</body>
</html>

U5duJaPyHBLsMPXnJ5XB1QpPxCghiRP_1680x8400.png


Code CSS


@import url('https://fonts.googleapis.com/css?
family=Yantramanav:100');
@import url('https://fonts.googleapis.com/css?
family=Montserrat:400');


html, body {
    margin: 0;
    padding: 0;
    height: 20%;
    width: 100%;
}

.intro {
    height: 55%;
    width: 100%;
    margin: auto;
    background: url('images/0.jpeg');
    background-size: cover;
    display: table;
    top: 0;
}

.intro .inner {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    max-width: none;
}

.content {
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.content h1 {
    font-family: 'Yantramanav', sans-serif;
    font-size: 600%;
    font-weight: 100;
    color: #ffffff;
    line-height: 70%; 
}

a.button {
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
}

a.button:hover {
    padding: 20px;
    border-radius: 10px;
    display: inline-block;
    text-decoration: none;
    font-size: 20px;
}

#header-1 {
    animation-duration: 1.5s;
}

#header-2 {
    animation-delay: .4s;
    animation-duration: 1.5s;
}

#section-1 {
    animation-duration: 2s;
}

#section-2 {
    animation-duration: 2s;
}


@media screen and (max-width: 900px) {
    
}

@media screen and (max-width: 768px) {
    
}

@media screen and (max-width: 480px) {
    
}

DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

🎄Thanks and have a nice day🎄

DQmbg612fRjQcx9KfvCFx4S1DhNsYzirZ72L5tjyQiWUzFu_1680x8400.jpg

Sort:  

Congratulations, you were selected for a random upvote! Follow @resteemy and upvote this post to increase your chance of being upvoted again!
Read more about @resteemy here.