Membuat Flip Card Dengan CSS dan jQuery

Membuat Flip Card Dengan CSS dan jQuery

Membuat Flip Card Dengan CSS dan jQuery

Cara Membuat Flip Card Dengan CSS dan jQuery, ini adalah card profil dengan animasi flip. Pada dasarnya,  card adalah modul persegi panjang kecil atau persegi panjang bulat dengan gambar dan teks. Ini adalah titik masuk bagi pengguna untuk mempelajari lebih lanjut dengan mengklik link. Dan card profil berisi hanya gambar, nama, deskripsi kecil, dan bagian lainnya seperti keterampilan, usia, dll Ketika card benar-benar berputar dan menunjukkan  bagian belakang, maka disebut flip effect.

Hari ini kalian akan belajar membuat  flipping profile cards. Pada dasarnya ada 3 card dan setiap card berisi gambar di seluruh kotak dan judul. Pertama, kalian hanya akan melihat gambarnya, tetapi saat kalian mengarahkan kursor ke gambar tersebut, judul dan deskripsi akan muncul. Dan ketika kalian mengklik kartu , maka itu akan membalik ke belakang dan menampilkan gambar dalam lingkaran dan sampul, dan beberapa teks lainnya. Di sana admin menggunakan profil anjing ( maapkeun kasar hehehe ), jadi tersedia nama & ras di bagian depan, dan usia, berat, dan warna di bagian belakang.

Jadi, Hari ini admin akan berbagi cara membuat Card Flip Animation Menggunakan CSS dan jQuery . Di sana admin menggunakan HTML untuk membuat tata letak, CSS untuk style, dan jQuery untuk fungsi flip dalam program ini. Program ini dapat digunakan untuk pertunjukan testimonial atau profil karyawan dengan detailnya. kalian dapat menggunakan program card flip ini di situs web kalian sebagai apa pun yang ingin kalian tunjukkan.

Nah jika kalian tertarik dengan program ini kalian bisa melihat preview program ini dibawah tentu dengan source code yang admin sediakan.


Membuat Flip Card Dengan CSS dan jQuery


mari kita bahas tentang program yang akan dibuat ini. Pertama admin telah membuat tag div utama bernama container dan menempatkan semua elemen di dalamnya. Di dalam div container, admin telah menempatkan 3 bagian div untuk 3 card. Setiap bagian div card berisi banyak div, daftar, dan tag lain seperti hyperlink. Di dalam satu card terdapat judul, deskripsi, gambar di sisi depan dan 2 gambar profil dan sampul, teks di bagian belakang. Juga di file HTML , admin telah menautkan file lain seperti CSS, JS, dan jQuery CDN.

Sekarang menggunakan CSS untuk menempatkan semua item di tempat yang tepat, seperti yang kalian lihat di preview. Dengan CSS pertama admin memberikan nilai dasar seperti ukuran, posisi, margin, padding, dll ke elemen. Untuk membuat file 3D efek saat membalik admin menggunakan transform - style : preserv - 3d ; admin menggunakan perintah @keyframe untuk membuat beberapa animasi dan kueri @media untuk desain responsif.

jQuery di sini sebagai efek toggle flip dalam program ini. Di sana admin menggunakan pernyataan JS if { } else { } untuk mendeklarasikan fungsi, dan menambahkan dan menghapus nama kelas sesuai dengan tindakan pengguna.

Kalian akan mengerti setelah mendapatkan kode, admin tidak bisa menjelaskan semuanya di sini secara tertulis. Untuk membuat program ini kalianharus membuat 3 file. File pertama untuk HTML , kedua untuk CSS , dan file ketiga untuk JavaScript .

Ikuti langkah-langkah untuk membuat program ini tanpa kesalahan apa pun.

Buat file HTML bernama index.html dan masukkan kode-kode ini di bawah ini.

<!DOCTYPE html>
<!--Code By RuangCoder  ( https://www.ruangcoder.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Card Flip Animation | RuangCoder.com</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<link rel="stylesheet" href="./style.css">

</head>
<body>
<div class="container">
  <div class="card">
    <div class="card-1 card-object card-object-hf"><a class="face front" href="#">
        <div class="titleS">
          <div class="title">Rocky</div>
          <div class="subtitle">Alaskan Husky</div>
        </div></a><a class="face back" href="#">
        <div class="img-wrapper">
          <div class="avatar"></div>
        </div>
        <div class="infoS">
          <div class="info-title">Rocky</div>
          <ul class="info-content">
            <li class="info-content-item">Age <span>6 years</span></li>
            <li class="info-content-item">Color <span>White</span></li>
            <li class="info-content-item">Weight <span>34kg</span></li>
          </ul>
        </div></a></div>
  </div>
  <div class="card">
    <div class="card-2 card-object card-object-hf"><a class="face front" href="#">
        <div class="titleS">
          <div class="title">Tommy</div>
          <div class="subtitle">American Pitbull</div>
        </div></a><a class="face back" href="#">
        <div class="img-wrapper">
          <div class="avatar"></div>
        </div>
        <div class="infoS">
          <div class="info-title">Tommy</div>
          <ul class="info-content">
            <li class="info-content-item">Age <span>4 years</span></li>
            <li class="info-content-item">Color <span>Gray</span></li>
            <li class="info-content-item">Weight <span>28kg</span></li>
          </ul>
        </div></a></div>
  </div>
  <div class="card">
    <div class="card-3 card-object card-object-hf"><a class="face front" href="#">
        <div class="titleS">
          <div class="title">Bruno</div>
          <div class="subtitle">German Shepherd</div>
        </div></a><a class="face back" href="#">
        <div class="img-wrapper">
          <div class="avatar"></div>
        </div>
        <div class="infoS">
          <div class="info-title">Bruno</div>
          <ul class="info-content">
            <li class="info-content-item">Age <span>8 years</span></li>
            <li class="info-content-item">Color <span>Brown</span></li>
            <li class="info-content-item">Weight <span>39kg</span></li>
          </ul>
        </div></a></div>
  </div>
</div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
  <script  src="function.js"></script>

</body>
</html>

Sekarang buat file CSS bernama style.css dan masukkan kode-kode ini yang diberikan di sini.

/* Code By RuangCoder ( https://www.ruangcoder.com ) */
@import url('https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap');
body {
  font-family: 'Josefin Sans', sans-serif;
  background-color: #f3f3f3;
  color: #222;
}
html,
body {
  height: 100%;
}
.container {
  position: relative;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0 5%;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
}
.card {
  display: block;
  float: left;
  position: relative;
  margin: 0;
  width: 100%;
  height: 0;
  padding: 0 0 28%;
  -webkit-perspective: 700px;
          perspective: 700px;
}
.card-object {
  color: #FFF;
  display: block;
  float: left;
  position: absolute;
  top: 6%;
  left: 6%;
  width: 88%;
  height: 88%;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
}
.card-object.card-1 .front {
  background: #222 url(https://webdevtrick.com/wp-content/uploads/husky.jpg) 90% 35%;
  background-size: 115%;
}
.card-object.card-1 .back .img-wrapper {
  background: transparent url(https://webdevtrick.com/wp-content/uploads/husky.jpg) 70% 45%;
  background-size: 160%;
}
.card-object.card-1 .back .avatar {
  background: transparent url(https://webdevtrick.com/wp-content/uploads/husky.jpg) 40% 20%;
  background-size: 130% 130%;
}
.card-object.card-2 .front {
  background: #222 url(https://webdevtrick.com/wp-content/uploads/pitbull.jpg) 50% 90% no-repeat;
  background-size: 105%;
}
.card-object.card-2 .back .img-wrapper {
  background: transparent url(https://webdevtrick.com/wp-content/uploads/pitbull.jpg) 70% 50%;
  background-size: 140%;
}
.card-object.card-2 .back .avatar {
  background: transparent url(https://webdevtrick.com/wp-content/uploads/pitbull.jpg) 50% 50% no-repeat;
  background-size: 140% 140%;
}
.card-object.card-3 .front {
  background: #222 url(https://webdevtrick.com/wp-content/uploads/german.jpg) 80% 100% no-repeat;
  background-size: 108%;
}
.card-object.card-3 .back .img-wrapper {
  background: transparent url(https://webdevtrick.com/wp-content/uploads/german.jpg) 90% 40% no-repeat;
  background-size: 115%;
}
.card-object.card-3 .back .avatar {
  background: #fff url(https://webdevtrick.com/wp-content/uploads/german.jpg) 0 50% no-repeat;
  background-size: 120% 120%;
}
.card-object.flip-in.card-1,
.card-object.flip-in.card-3 {
  -webkit-animation: flip-2-hor-top-fwd 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
          animation: flip-2-hor-top-fwd 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-in.card-2 {
  -webkit-animation: flip-2-hor-bottom-fwd 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
          animation: flip-2-hor-bottom-fwd 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) both;
}
.card-object.flip-out.card-1,
.card-object.flip-out.card-3 {
  animation: flip-2-hor-top-fwd 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) reverse both;
}
.card-object.flip-out.card-2 {
  animation: flip-2-hor-bottom-fwd 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55) reverse both;
}
.card-object-hf .back {
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg);
}
.face {
  color: #fff;
  text-decoration: none;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: end;
          align-items: flex-end;
  flex-wrap: wrap;
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
}
.face.front {
  z-index: 20;
  overflow: hidden;
  background-repeat: no-repeat;
  background-position: 50% 50%;
}
.face.front::before {
  position: absolute;
  top: -1px;
  right: -1px;
  bottom: -1px;
  left: -1px;
  content: "";
  background: linear-gradient(45deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.5) 40%, rgba(0, 0, 0, 0.1) 100%) no-repeat;
  opacity: 0.7;
  z-index: 20;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.face.front::after {
  position: absolute;
  top: 7%;
  right: 7%;
  bottom: 7%;
  left: 7%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  z-index: 100;
  content: "";
}
.face.front .titleS {
  position: absolute;
  bottom: 3%;
  left: 25%;
  right: 25%;
  overflow: hidden;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  text-align: center;
  flex-wrap: wrap;
  z-index: 100;
  -webkit-transform: translateY(0);
          transform: translateY(0);
  -webkit-transition: -webkit-transform 0.28s ease;
  transition: -webkit-transform 0.28s ease;
  transition: transform 0.28s ease;
  transition: transform 0.28s ease, -webkit-transform 0.28s ease;
}
.face.front .titleS .title {
  position: relative;
  width: 100%;
  text-transform: uppercase;
  font-size: 2vw;
  line-height: 1;
  opacity: 0.8;
  -webkit-transition: opacity 0.2s ease;
  transition: opacity 0.2s ease;
}
.face.front .titleS .title::after {
  display: block;
  margin: 7% auto 8% auto;
  width: 100%;
  height: 1px;
  content: "";
  background-color: #fff;
  opacity: 0.5;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.15s;
  transition: -webkit-transform 0.15s;
  transition: transform 0.15s;
  transition: transform 0.15s, -webkit-transform 0.15s;
}
.face.front .titleS .subtitle {
  font-size: 0.9vw;
  line-height: 1;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity: 0;
  -webkit-transition: opacity 0.15s;
  transition: opacity 0.15s;
}
.face.front:hover::before {
  opacity: 0.9;
}
.face.front:hover .titleS {
  -webkit-transform: translateY(-50%);
          transform: translateY(-50%);
}
.face.front:hover .titleS .title {
  opacity: 1;
}
.face.front:hover .titleS .title::after {
  -webkit-transform: scale(1);
          transform: scale(1);
  opacity: 0.5;
  -webkit-transition-delay: 0.15s;
          transition-delay: 0.15s;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}
.face.front:hover .titleS .subtitle {
  opacity: 0.7;
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s;
  -webkit-transition-duration: 0.2s;
          transition-duration: 0.2s;
}
.face.back {
  color: #222;
  background: #fff;
  z-index: 10;
}
.info-container {
  position: absolute;
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  flex-wrap: wrap;
  -webkit-box-align: start;
          align-items: flex-start;
  top: 6%;
  right: 6%;
  bottom: 6%;
  left: 6%;
  padding: 0;
}
.img-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 38%;
  z-index: 10;
}
.img-wrapper::after {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(14, 6, 70, 0.6);
  opacity: 0.7;
}
.avatar {
  position: absolute;
  left: 50%;
  height: 68%;
  width: 25.84%;
  display: block;
  border-radius: 50%;
  margin-top: 25.08%;
  margin-left: -12.92%;
  background-color: #fff;
  border: 3px solid #FFF;
  z-index: 20;
}
.infoS {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: center;
          justify-content: center;
  -webkit-box-align: center;
          align-items: center;
  flex-wrap: wrap;
  position: absolute;
  top: 50.92%;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 4% 15% 15%;
}
.info-title {
  font-size: 1.5vw;
  text-align: left;
  padding: 0;
  margin: 0;
  text-align: center;
  display: block;
  width: 100%;
}
.info-content {
  display: -webkit-box;
  display: flex;
  -webkit-box-pack: justify;
          justify-content: space-between;
  -webkit-box-align: center;
          align-items: center;
  width: 100%;
  padding: 8% 0 0;
  margin: 8% 0 0;
  border-top: 1px solid #e0e0e0;
}
.info-content-item {
  color: #222;
  font-size: 0.75vw;
  line-height: 1;
  text-align: center;
  display: inline-block;
  padding: 0;
  margin: 0;
  text-transform: uppercase;
  color: #aaa;
}
.info-content-item span {
  display: block;
  font-weight: bold;
  font-size: 1.1vw;
  margin-top: 7px;
  text-transform: none;
  color: #222;
}
.info {
  position: absolute;
  bottom: 30px;
  left: 5%;
  right: 5%;
  font-size: 1em;
  text-align: center;
}
.info a {
  color: #8c0f8c;
  text-decoration: none;
}
.info a:hover {
  text-decoration: underline;
}

@-webkit-keyframes flip-2-hor-top-fwd {
  0% {
    -webkit-transform: translateY(0) translateZ(0) rotateX(0);
            transform: translateY(0) translateZ(0) rotateX(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
            transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}
@keyframes flip-2-hor-top-fwd {
  0% {
    -webkit-transform: translateY(0) translateZ(0) rotateX(0);
            transform: translateY(0) translateZ(0) rotateX(0);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
  100% {
    -webkit-transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
            transform: translateY(-100%) translateZ(100px) rotateX(-180deg);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
}

@-webkit-keyframes flip-2-hor-bottom-fwd {
  0% {
    -webkit-transform: translateY(0) translateZ(0) rotateX(0);
            transform: translateY(0) translateZ(0) rotateX(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg);
            transform: translateY(100%) translateZ(100px) rotateX(180deg);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
}
@keyframes flip-2-hor-bottom-fwd {
  0% {
    -webkit-transform: translateY(0) translateZ(0) rotateX(0);
            transform: translateY(0) translateZ(0) rotateX(0);
    -webkit-transform-origin: 50% 100%;
            transform-origin: 50% 100%;
  }
  100% {
    -webkit-transform: translateY(100%) translateZ(100px) rotateX(180deg);
            transform: translateY(100%) translateZ(100px) rotateX(180deg);
    -webkit-transform-origin: 50% 0%;
            transform-origin: 50% 0%;
  }
}
@media (max-width: 650px) {
  .container {
    display: block;
  }
  .card {
    height: 200px;
  }
  .info-title {
    font-size: 7vw;
  }
  .info-content-item {
    font-size: 4vw;
  }
  .info-content-item span {
    font-size: 3vw;
  }
  .face.front .titleS .title {
    font-size: 9vw;
  }
  .face.front .titleS .subtitle {
    font-size: 5vw;
  }
}

Langkah terakhir, buat file JavaScript bernama function.js dan masukkan kodenya.

//Code By RuangCoder ( https://www.ruangcoder.com )
var $cards = $('.card-object'),
    $faceButtons = $('.face');

$faceButtons.on('click', flipCard);

function flipCard(event) {
  event.preventDefault();
  
  var $btnFace = $(this),
      $card = $btnFace.parent('.card-object');
  
  if( $card.hasClass('flip-in') ) {
    closeCards();
  } else {
    closeCards();
    openCard($card);
  }
  
}

function closeCards() {
  $cards.each( function() {
    $(this)
      .filter('.flip-in')
      .removeClass('flip-in')
      .queue( function() {
        // Force reflow hack
        var reflow = this.offsetHeight;
        $(this)
          .addClass('flip-out')
          .dequeue();
      })
      
  });
}

function openCard($card) {
  $card
    .removeClass('flip-out')
    .queue( function() {
      // Force reflow hack
      var reflow = this.offsetHeight;
      $(this)
        .addClass('flip-in')
        .dequeue();
    });
    
}

Penutup

Nah sampai disini kalian telah berhasil Cara Membuat Animasi Card Flip dengan CSS & jQuery, mungkin artikel nya sampai disini saja, semoga bermanfaat buat kalian, dan terimakasih sudah berkunjung, jangan bosan - bosan untuk berkunjung.

Anda mungkin menyukai postingan ini