Membuat Animasi Flip pada Form Dengan jQuery

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.

20 November 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat