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

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.

  
    
    
    

    
    

    3D effect menggunakan Vanilla.tilt.js
  
  
    
Hello, world!

   

    
    

    -->
  

#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 / dibagian dalam paling bawah.

  
    
    
    

    
    

    3d effect menggunakan Vanilla-tilt.js
  
  
    

      

        

          
3d effect menggunakan Vanilla-tilt.js
        

      


      

        

          

              Pressplay V2
            See details
          
        




      

    


    
    
    
    

#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.