BERITA PROGRAMMING Tutorial Lengkap Membuat 3D Effect Menggunakan Vanilla-tilt.js

Tutorial Lengkap Membuat 3D Effect Menggunakan Vanilla-tilt.js

Oleh Arizka Hamidan Darojad | Jumat, 23 September 2022

Tutorial Lengkap Membuat 3D Effect Menggunakan Vanilla-tilt.js

Ingin belajar membuat 3D effect menggunakan vanilla-tilt.js? Yuk simak tutorial ini sampai selesai ya!

Yuk, belajar di GAMELAB ACADEMY, belajar kapan saja, di mana saja. Kurikulum berbasis industri. Dapatkan SERTIFIKAT ketika kamu sudah selesai!

Yuk, ikuti program inovatif MAGANG ONLINE untuk berbagai bidang seperti animasi, coding, 3D, illustrasi, musik dan bisnis hanya di GAMELAB.ID!

Daftar Isi Artikel

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/bootstrap@5.1.3/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/bootstrap@5.1.3/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. 

atau bisa menggunakan file online Vanilla-tilt.js dari CDNJS, dalam tutorial ini saya menggunakan online file.

#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/bootstrap@5.1.3/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/bootstrap@5.1.3/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.

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.


Arizka Hamidan Darojad

Arizka Hamidan Darojad

Jumat, 23 September 2022

ARTIKEL TERKAIT

Magang lebih mudah dan bisa dilakukan dari mana saja dengan Program Magang Online Gamelab. Magang Bersertifikat, plus Pelatihan!

DAFTAR MAGANG

ARTIKEL POPULER

KATEGORI