Membuat Animasi Flip pada Form Dengan jQuery

20/11/2019    Shelli Ripati    51     Website

Hallo teman-teman DUMET School, pada kesempatan kali ini saya akan Membuat Animasi Flip pada Form Dengan jQuery. Dimana animasi flip ini akan dijalankan ketika sudah melakukan klik pada tombol Send Message kemudian animasi akan berganti tampilan sebuah form input dengan animasi flip. Langsung saja untuk dapat membuat animasi flip pada form menggunakan jquery kita akan buat struktur htmlnya seperti pada script di bawah ini.

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Membuat Animasi Flip pada Form Dengan Jquery</title>
      <script src="https://code.jquery.com/jquery-3.4.1.js"></script>
      <link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,300i,400,400i,700i" rel="stylesheet">
      <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">
    </head>
    <body>
       <br><br><br><br><br><br><br><br><br><br>
        <div class="cont-contactBtn">
                    <div class="cont-flip">
                        <div class="front">
                            <a href="#" class="btn btn-white flip">Send Message</a>
                        </div>
                        <div class="back">
                            <a href="#" class="flip close"></a>
                            <form class="contact-form" action="">
                <div class="form-group">
                  <label for="exampleInputEmail1">Email address</label>
                  <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
                  <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
                </div>
                <div class="form-group">
                  <label for="exampleInputPassword1">Password</label>
                  <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
                </div>
                <div class="form-group form-check">
                  <input type="checkbox" class="form-check-input" id="exampleCheck1">
                  <label class="form-check-label" for="exampleCheck1">Check me out</label>
                </div>
                                <input type="submit" value="Send">
                            </form>
                        </div>
                    </div>
    </body>
    </html>

Jika sudah maka tahap selanjutnya kita akan membuat style css masih dalam satu file seperti script di bawah ini.

<style>       
        body {
          background: blue;
             
        }
        a, p {
          font-family: 'Roboto Condensed', sans-serif;
        }
        .cont-contactInfo {
          float: left;
          padding-right: 5%;
          width: 45%;
        }
         
         
        .cont-contactBtn {
          height: 359px;
          margin: 0 auto;
          width: 574px;
          position: relative;
          perspective: 800px;
              border-radius: 50px;
            
        }
        .cont-contactBtn .cont-flip {
          position: absolute;
           transition: transform 0.5s;
           transform-style: preserve-3d;
          height: 100%;
          width: 100%;
        }
        .cont-contactBtn .cont-flip .front, .cont-contactBtn .cont-flip .back {
          display: block;
          margin: 0;
          height: 100%;
          width: 100%;
          position: absolute;
           backface-visibility: hidden;
        }
         
        .cont-contactBtn .cont-flip .back {
          background-color: #fff;   
          transform: rotateX(180deg);
        }
        .cont-contactBtn .btn {
          margin-top: 155px;
        }
        .cont-contactBtn .cont-flip.flipped {
          transform: rotateX(180deg);
        }
        .cont-contactBtn .contact-form {
          padding: 0 10%;
          margin-top: 50px;
        }
        .cont-contactBtn .contact-form input, .cont-contactBtn .contact-form textarea {
          border: 1px solid #808080;
          font-size: 12px;
          padding: 10px 0;
          text-transform: uppercase;
        }
        .cont-contactBtn .contact-form .gutter {
          margin-right: 2.8%;
        }
        .cont-contactBtn .contact-form textarea {
          height: 106px;
          padding-left: 3%;
          margin-bottom: 22px;
          width: 96.2%;
              border-radius: 50px;
        }
        .cont-contactBtn .contact-form input[type="submit"] {
          background-color: #ff4d54;
          border: none;
          color: #fff;
          height: 45px;
          width: 100%;
          max-width: 93px;
          text-align: center;
            border-radius: 50px;
        }
        .cont-contactBtn .close {
          display: block;
          height: 19px;
          width: 19px;
          background-image: url('c.png');
          background-repeat: no-repeat;
          background-position: center;
          position: absolute;
          top: 15px;
          right: 3%;
        }
        .btn {
          border: 3px #fff solid;
          color: #fff;
          display: block;
          font-size: 18px;
          font-weight: normal;
          margin: 0 auto;
          max-width: 280px;
          padding: 15px 0;
          text-align: center;
          text-transform: uppercase;
          text-decoration: none;
          width: 70%;
            border-radius: 50px;
            background:#ff4d54;
        }
    </style>

Dan tahap terakhir teman-teman buat script jquery untuk membuat animasi flip pada form input yang sudah dibuat.

<script>
            $(document).ready(function(){
              $('.flip').click(function(){
                $('.cont-flip').toggleClass('flipped');
                return false;
              });
            });
 </script>

Demikian artikel tentang cara Membuat Animasi Flip pada Form Dengan jQuery. Semoga dapat bermanfaat dan selamat mencoba.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More