Cara Menggunakan Fungsi bounceIn Pada CSS
Hallo sobat, jumpa lagi dengan saya di panduan Source Code Aplikasi. Di artikel kali ini kita akan belajar mengenai Cara Menggunakan Fungsi bounceIn Pada CSS. BounceIn ini ialah sebuah style bagi di kolaborasikan dengan animasi CSS sehingga hasilnya benar-benar menarik. Manfaat bounce ini sama dengan bounce di Jquery, yang berbeda hanya cara pengetikannya saja dan bounce di CSS ini memang agak berat load nya jikalau di bandingkan dengan Jquery. Di bawah ini ialah demo gambarnya, bagi teman-teman bebas siapkan gambar apa saja yang nanti kita akan gunakan pada latihan ini
Seperti yang teman-teman lihat di gambar di atas ini, jikalau gambar telah mengerjakan bounce di bawah terdapat button yang berfungsi bagi merefresh agar bounceIn dapat di jalankan ulang
Bagus kini kita bikin, seperti biasanya siapkan text editornya kemudian copy script html nya di bawah ini
<html>
<head>
<title>BounceIn</title>
</head>
<body>
<div id=animated-example class=animated bounceIn></div>
<button onclick=myFunction()>Ulangi</button>
</body>
</html>
Save dengan nama index.html, oke kita akan melanjutkan Cara Menggunakan Fungsi bounceIn Pada CSS berikutnya tambahkan style css nya di pada tag <head>
<style>
.animated {
background-image: url(dumet1.png);
background-repeat: no-repeat;
background-position: left top;
padding-top:263px;
margin-bottom:0px;
-webkit-animation-duration: 10s;
animation-duration: 10s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
@-webkit-keyframes bounceIn {
0% {
opacity: 0;
-webkit-transform: scale(.3);
}
50% {
opacity: 1;
-webkit-transform: scale(1.05);
}
70% {
-webkit-transform: scale(.9);
}
100% {
-webkit-transform: scale(1);
}
}
@keyframes bounceIn {
0% {
opacity: 0;
transform: scale(.3);
}
50% {
opacity: 1;
transform: scale(1.05);
}
70% {
transform: scale(.9);
}
100% {
transform: scale(1);
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn;
}
</style>
Apabila telah, save dan jalankan di browser nya. Karenanya gambar yang kita atur telah berhasil diberikan guna bounceIn, langkah berikutnya tinggal kita berikan Javascript nya bagi menjalankan guna button agar ketika di klik bounceIn akan mengulang
<script>
function myFunction() {
location.reload();
}
</script>
Tambahkan Javascript nya di pada text editornya, jikalau telah refresh di browser nya. Karenanya bounce dan button telah terintegrasi dengan bagus, simple tapi menarik bukan. Kalian pun dapat memodifikasinya sendiri supaya terlihat lebih menarik. Oke sekianlah dulu di artikel kali ini mengenai Cara Menggunakan Fungsi bounceIn Pada CSS kita jumpa lagi di artikel berikutnya. Hingga Jumpa dan Terima Kasih.
Semoga bermanfaat 🙂
Sumber https://kursuswebsite.org
