Tutorial Pemrograman

Cara Membuat Animasi Split Menu dengan JavaScript

Dengan bahasa pemrograman CSS dan JavaScript, kita dapat dengan mudah membuat dan menampilkan berbagai animasi di fitur menu. Salah satunya adalah animasi split atau terbagi. Bahasa pemrograman CSS berfungsi membuat tampilan dan background menu, sedangkan bahasa pemrograman JavaScript berfungsi membuat animasi split/terbagi di menu.

Lalu, bagaimana membuat animasi split/terbagi di menu dengan bahasa pemrograman CSS dan bahasa pemrograman JavaScript? Mudah kok, yuk langsung saja buka komputer kamu dan ikuti beberapa langkah mudah di bawah ini.

1. Buka XAMPP Control Panel, serta aktifkan Apache.

2. Buka program teks editor yang ter-install di komputer kamu, disini saya menggunakan teks editor Notepad++. Ketikkan kode HTML5 berikut ini.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>Membuat Split Menu dengan JavaScript</title>
  </head>
  <body>
  <div class="menu">
  <ul class="menu-list" data-offset="10">
    <li class="menu-list-item" data-offset="20" onclick>
      Home
      <span class="mask"><span>Home</span></span>
      <span class="mask"><span>Home</span></span>
    </li>
    <li class="menu-list-item" data-offset="16" onclick>
      About
      <span class="mask"><span>About</span></span>
      <span class="mask"><span>About</span></span>
    </li>
    <li class="menu-list-item" data-offset="12" onclick>
      Work
      <span class="mask"><span>Work</span></span>
      <span class="mask"><span>Work</span></span>
    </li>
    <li class="menu-list-item" data-offset="8" onclick>
      Contact
      <span class="mask"><span>Contact</span></span>
      <span class="mask"><span>Contact</span></span>
    </li>
  </ul>
</div>
<script src="script.js" type="text/javascript"></script>
</body>
</html>

Simpan kode HTML5 di atas di folder xampplite – htdocs – buat folder baru dengan nama SplitMenu – simpan kode di atas dengan nama index.html.

3. Untuk melihat hasil script code di atas, kamu bisa buka browser kamu ketiklah http://localhost/SplitMenu. Menu masih berupa daftar.

4. Untuk membuat background menu, buka kembali lembar baru di teks editor dan ketikkan script code CSS berikut ini.

body {
  font-family: "Gilroy ExtraBold", system-ui, sans-serif;
  font-style: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  -webkit-font-kerning: normal;
  -webkit-text-size-adjust: 100%;
  background: linear-gradient(45deg, #666600, #666633);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transform: perspective(60rem);
          transform: perspective(60rem);
  position: fixed;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
}
html, body {
  width: 100vw;
  height: 100vh;
}
.menu-list {
  font-size: 4.25rem;
  line-height: 1.2;
  text-transform: uppercase;
  text-align: center;
  display: -webkit-box;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
          flex-direction: column;
  -webkit-box-align: center;
          align-items: center;
  -webkit-transform: rotatex(-10deg) rotatey(20deg);
          transform: rotatex(-10deg) rotatey(20deg);
}
.menu-list-item {
  position: relative;
  color: transparent;
  cursor: pointer;
}
.menu-list-item::before {
  content: '';
  display: block;
  position: absolute;
  top: 49%;
  left: -10%;
  right: -10%;
  height: 4px;
  border-radius: 4px;
  margin-top: -2px;
  background: #ff2c75;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transition: -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
  transition: -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
  transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
  transition: transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98), -webkit-transform 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
  z-index: 1;
}
.mask {
  display: block;
  position: absolute;
  overflow: hidden;
  color: #ff2c75;
  top: 0;
  height: 49%;
  -webkit-transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
  transition: all 0.8s cubic-bezier(0.16, 1.08, 0.38, 0.98);
}
.mask span {
  display: block;
}
.mask + .mask {
  top: 48.9%;
  height: 51.1%;
}
.mask + .mask span {
  -webkit-transform: translateY(-49%);
          transform: translateY(-49%);
}
.menu-list-item:hover .mask, .menu-list-item:active .mask {
  color: #fff;
  -webkit-transform: skewX(12deg) translateX(5px);
          transform: skewX(12deg) translateX(5px);
}
.menu-list-item:hover .mask + .mask, .menu-list-item:active .mask + .mask {
  -webkit-transform: skewX(12deg) translateX(-5px);
          transform: skewX(12deg) translateX(-5px);
}
.menu-list-item:hover::before, .menu-list-item:active::before {
  -webkit-transform: scale(1);
          transform: scale(1);
}

Simpan kode CSS di atas di folder xampplite – htdocs – pilih folder SplitMenu – simpan kode di atas dengan nama style.css.

5. Reload alamat website http://localhost/SplitMenu. Tampilan background menu, namun menu belum muncul animasi split/terbagi ketika di klik.

6. Untuk membuat animasi split/terbagi di menu, buka kembali lembar baru di teks editor dan ketikkan script code JavaScript berikut ini.

var $menu = $('.menu-list'),
    $item = $('.menu-list-item'),
    w = $(window).width(),
    h = $(window).height();

$(window).on('mousemove', function(e) {
  var offsetX = 0.5 - e.pageX / w,
      offsetY = 0.5 - e.pageY / h,
      dy = e.pageY - h / 2,
      dx = e.pageX - w / 2,
      theta = Math.atan2(dy, dx),
      angle = theta * 180 / Math.PI - 90,
      offsetPoster = $menu.data('offset'),
      transformPoster = 'translate3d(0, ' + -offsetX * offsetPoster + 'px, 0) rotateX(' + (-offsetY * offsetPoster) + 'deg) rotateY(' + (offsetX * (offsetPoster * 2)) + 'deg)';
  
  if (angle < 0) {
    angle = angle + 360;
  }
  
  $menu.css('transform', transformPoster);
  
  $item.each(function() {
    var $this = $(this),
        offsetLayer = $this.data('offset') || 0,
        transformLayer = 'translate3d(' + offsetX * offsetLayer + 'px, ' + offsetY * offsetLayer + 'px, 20px)';
    $this.css('transform', transformLayer);
  })
})

Simpan kode JavaScript di atas di folder xampplite – htdocs – pilih folder SplitMenu – simpan kode di atas dengan nama script.js.

7. Reload alamat website: http://localhost/SplitMenu. Tampilan awal menu split/terbagi.

Klik salah satu menu untuk melihat animasi split/terbagi.

Tampilan lainnya dari menu split/terbagi.

8. Selesai, menarik sekali bukan?.

Catatan:

  1. Htdocs adalah salah satu folder bawaan dari XAMPP, yang tugasnya khusus untuk menyimpan berkas-berkas yang akan dijalankan, seperti berkas PHP, HTML, CSS, dan JavaScript.
  2. Kemudian, mungkin ada yang menanyakan maksud dari http://localhost/ SplitMenu. Localhost merupakan server lokal pada computer. Localhost dapat diaktifkan ketika kamu meng-klik start Apache di XAMPP Control Panel. SplitMenu menunjuk pada folder  SplitMenu saya di xampplite – htdocs. Serta, index.html dan style.css adalah nama file yang tersimpan script code di atas.

Demikian penjelasan dari tutorial ‘Cara Membuat Animasi Split Menu dengan JavaScript’. Selamat mencoba.

Tutorial Lainnya dari Penulis:


Komentar

Leave a Reply

Your email address will not be published. Required fields are marked *

Inwepo adalah media platform yang membantu setiap orang untuk belajar dan berbagi tutorial, tips dan trik cara penyelesaian suatu masalah di kehidupan sehari-hari dalam bentuk teks, gambar. dan video.

Dengan bergabung bersama kami dan membuat 1 tutorial terbaik yang kamu miliki dapat membantu jutaan orang di Indonesia untuk mendapatkan solusinya. Ayo berbagi tutorial terbaikmu.

Ikuti Kami di Sosmed!

        

Berlangganan Tutorial Gratis Melalui Email!

Copyright © 2020 Inwepo - All Rights Reserved.

To Top