Sebelum masuk ke tutorial membuat 3D effect menggunakan Vanilla.tilt.js, ada baiknya kita memahami terlebih dahulu apa itu Javascript, vanilla.js, dan vanilla-tilt.js.
Apa itu JavaScript?
Javascript merupakan bahasa pemrograman yang digunakan untuk mengembangkan website agar terlihat lebih dinamis dan interaktif. Dengan Javascript, kita dapat meningkatkan fungsionalitas pada halaman website. Bahkan kita dapat membuat aplikasi, tools, bahkan game di website menggunakan Javascript.
Apa itu vanilla.js?
Vanilla.js merupakan istilah ketika seseorang menggunakan sebuah javacript polos tanpa menggunakan Third Party, library atau framework manapun.
Apa itu vanilla-tilt.js?
Vanilla-tilt.js adalah JavaScript library yang ringan untuk membuat efek paralaks interaktif pada elemen DOM menggunakan RequestanimationFrame.
Baca Juga : Cara Menggunakan BGM pada Game Phaser JS
Langkah-langkah dalam Penerapan vanilla-tilt.js
#Pertama
Persiapkan file HTML, CSS, JavaScript dan image di sebuah folder dan kemudian buka di aplikasi editor yang kalian miliki. Di sini saya menggunakan Bootstrap untuk mempermudah pengerjaan.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<title>3D effect menggunakan Vanilla.tilt.js</title>
</head>
<body>
<h1>Hello, world!</h1>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
-->
</body>
</html>
#Kedua
Kemudian buka link repo dari https://micku7zu.github.io/vanilla-tilt.js/ dan download file vanilla-tilt.js, saya sarankan untuk mendownload yang "Vanilla-tilt.min.js.
.png?1640367328183)
atau bisa menggunakan file online Vanilla-tilt.js dari CDNJS, dalam tutorial ini saya menggunakan online file.
.png?1640367601581)
#Ketiga
Copy link dari CDNJS kemudian letakkan dibagian dalam <head> / dibagian dalam <body> paling bawah.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
<title>3d effect menggunakan Vanilla-tilt.js</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col">
<h3>3d effect menggunakan Vanilla-tilt.js</h3>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="keyboard-box">
<h6 class="keyboard-name">Pressplay V2</h6>
<button type="button" class="btn btn-primary details-button">See details</button>
</div>
</div>
</div>
</div>
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vanilla-tilt/1.7.2/vanilla-tilt.min.js" integrity="sha512-K9tDZvc8nQXR1DMuT97sct9f40dilGp97vx7EXjswJA+/mKqJZ8vcZLifZDP+9t08osMLuiIjd4jZ0SM011Q+w==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</body>
</html>
#Keempat
Kemudian tinggal kita percantik tampilannya dengan menggunakan CSS agar lebih menarik. Pada bagian transform-style kita isi dengan "preserve-3d", jika transform-style tidak kita isi, maka 3d effect tidak akan muncul.
.keyboard-box {
position: relative;
background-color: #ddfb7a;
border-radius: 10px;
height: 500px;
transform-style: preserve-3d;
}
.keyboard-box::before {
content: 'MY';
position: absolute;
color: #ffffff;
font-size: 5em;
font-weight: bold;
font-style: italic;
top: 30px;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
transition: 0.5s;
}
.keyboard-box:hover::before {
opacity: 0.5;
}
.keyboard-box::after {
content: 'keyboard';
position: absolute;
color: #ffffff;
font-size: 4em;
font-weight: bold;
font-style: italic;
top: 350px;
left: 50%;
transform: translate(-50%, 0);
opacity: 0;
transition: 0.5s;
}
.keyboard-box:hover::after {
opacity: 0.5;
}
.keyboard-name {
position: absolute;
top: 0;
color: #ffffff;
width: 100%;
text-align: center;
font-weight: bold;
font-size: 1.2em;
transform: translate3d(0, 0, 50px);
opacity: 0;
transition: 0.5s;
}
.keyboard-box:hover .keyboard-name {
top: 20px;
opacity: 1;
}
.details-button {
position: absolute;
bottom: 0;
left: 50%;
transform: translate3d(-50%, 0, 50px);
opacity: 0;
transition: 0.5s;
}
.keyboard-box:hover .details-button {
opacity: 1;
bottom: 20px;
}#Kelima
Untuk file JavaScript-nya, kita bisa meng-copy di repositori karena sudah disediakan. Di repositori tersebut sudah ada beberapa pilihan untuk mengatur perbesaran effect 3d, kecepatan effect saat di sorot, dll.
.png?1640368947121)
VanillaTilt.init(document.querySelectorAll('.setup-box'), {
max: 35,
speed: 400,
glare:true
});file javascript di atas dibuat agar tampilan 3D bisa muncul.
Untuk demo hasil tutorial di atas, kamu bisa di lihat di sini https://codepen.io/arizkahd/pen/GRMOjEW.
Demikian artikel tutorial membuat 3d effect menggunakan Vanilla-tilt.js. Semoga tutorial ini dapat membantu kalian dalam membuat effect 3d menggunakan Vanilla-tilt.js. Saya rasa mungkin masih banyak kekurangan dalam pembuatan artikel ini. Oleh karena itu, saya meminta maaf apabila ada salah kata maupun kata-kata yang kurang berkenan. Sekian dan terima kasih.
Artikel ini merupakan kontribusi dari perseta program Gamelab Indonesia. Isi dari artikel ini tidak mewakili pandangan tim Gamelab Indonesia.