Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery
Animasi flip box adalah sebuah sebuah animsi yang lumayan menarik bagi kita terapkan di laman, kita dapat terapkan di element berupa konten. tak hanya dengan box atau kotak kita dapat merancang animasi tetapi pun dapat dengan element yang lain, dapat dengan gambar ataupun element yang lain nya. Berikut ini akan saya bahas panduan mengenai bagaimana Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery.
Di contoh kasus dibawah ini yaitu kasus sederhana animasi berupa box, bagi merancang animasi ini kita akan dibantu dengan sintak jQuery bagi animasi yang akan dijalankan. Baiklah seketika saja kita praktekan.
Langkah pertama-tama kita bikin struktur HTML dan merancang konten bagi isian box nya dengan sintak HTML berikut.
<body>
<div class=wrapper>
<section id=cardlist>
<div class=card reverse>
<div class=front>
<h2>What is Lorem Ipsum?</h2>
<button>Read More</button>
</div>
<div class=back>
<p><strong>Lorem Ipsum</strong>
<br />
<br />Lorem Ipsum is
<br />simply dummy text of the
<br />printing and typesetting
<br />Lorem Ipsum has been the industry's
<br />standard dummy text ever
<br />since the 1500s,
<br />when an unknown printer
<br /><br />
and many more!!
</p>
</div>
</div>
</section>
</div>
</body>
Setelah merancang struktur seperti diatas, kita akan desain struktur diatas dengan sintak CSS3 bagi merancang sebuah kotak box dan yang lain-lain nya, ketikan sintak CSS3 berikut.
.wrapper {
width: 600px;
margin:auto;
}
#cardlist {
width: 300px;
height: 300px;
position: relative;
-webkit-perspective: 800;
margin-left: 150px;
}
.card {
width: 100%;
height: 100%;
margin-top: 20px;
-webkit-transform-style: preserve-3d;
-webkit-transition: -webkit-transform 1s;
}
.card div {
display: block;
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
}
.card .front {
background: #34495e;
}
.card .back {
background: #ecf0f1;
-webkit-transform: rotateY(180deg);
}
.card.reverse {
-webkit-transform-origin: right center;
}
.card.reverse.flipped {
-webkit-transform: translateX(-100%) rotateY(-180deg);
}
.card {
font-family: 'Lato', sans-serif;
text-align: center;
}
.card div {
border-radius: 10px;
box-shadow: 0 0 8px #000;
}
h2 {
text-align: center;
color: #fff;
font-weight: normal;
margin-top: 100px;
}
button {
padding: 5px;
background: transparent;
border: 1px solid #fff;
color: #fff;
font-size: 14pt;
font-weight: 300;
font-family: 'Lato';
}
p {
padding: 15px 25px;
text-align: left;
opacity: 0;
position: absolute;
top: 0;
left: -30px;
-webkit-transition: 1s;
-webkit-transition-delay: 0.4s;
}
.card.flipped p {
opacity: 1;
left: 0;
}Berikutnya yaitu kita akan merancang sintak jQuery bagi animasi flip box nya, berikut sintak jQuery sederhana.
$(document).ready(function() {
$('.card').hover(function() {
$(this).addClass('flipped');
}, function() {
$(this).removeClass('flipped');
});
});Setelah segala sintak diatas diketikan simpan file dengan format .html kemudian buka dibrowser masing-masing dan lihat hasilnya. Selesai
Baiklah itu tadi panduan sederhana mengenai bagaimana Cara Membuat Animasi Flip Box dengan CSS3 dan jQuery. semoga bermanfaat..
Sumber https://kursuswebsite.org
