Cara Menciptakan Sajian Navigasi Bouncing

Cara Membuat Navigasi Bouncing - Bouncing jikalau diartikan ialah memantul, naviigasi ini mempunyai efek memantul jikalau navigasi tersebut di klik cukup unik dan menarik. Tampilan Navigasi ini seperti  Navigasi Animasi Hamburger memiliki bentuk lingkaran . Untuk demonya Anda dapat menekan tombol demo dibawah ini :

Demo Code

Bagaiman Anda tertarik memasangnya di Blog, oke berikut ini langkah-langkahnya :

Pada tahap pertama Anda cari kode ]]></b:skin> kemudian copy instruksi dibawah ini dan pastekan diatasnya.

/* Navigasi Bouncing */
.wrapper {
  position: relative;
  margin: 0 auto;
  width: 500px;
  height: 100%;
}

#menu {
  position: relative;
  top: 60px;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  text-align: center;
  border-radius: 100px;
  background: linear-gradient(#fff 0%, #bfc1c1 100%);
  box-shadow: 0 10px 3px -6px #777;
  cursor: pointer;
  z-index: 1;
}

#menu p {
  font-size: 16px;
  line-height: 105px;
  letter-spacing: 1px;
}

#about, #projects  {
  position: absolute;
  top: 70px;
  left: 200px;
  width: 80px;
  height: 80px;
  text-align: center;
  border-radius: 80px;
  background: linear-gradient(#fff 0%, #bfc1c1 100%);
  box-shadow: 0 10px 6px -6px #777;
}

#about, #projects p {
  font-size: 12px;
  line-height: 85px;
  letter-spacing: 1px;
}

.animone {
  -webkit-animation: bounce 0.7s ease-in-out;
}

.animtwo {
  -webkit-animation: bounce 0.8s ease-in-out;
  transition: 0.4s ease;
}

@-webkit-keyframes bounce {
    0% { -webkit-transform: scale(1.0); }
   10% { -webkit-transform: scale(1.2); }
   20% { -webkit-transform: scale(1.3); }
   30% { -webkit-transform: scale(1.2); }
   40% { -webkit-transform: scale(1.0); }
   50% { -webkit-transform: scale(1.1); }
   60% { -webkit-transform: scale(1.0); }
   70% { -webkit-transform: scale(1.05);}
   80% { -webkit-transform: scale(1.0); }
   90% { -webkit-transform: scale(1.02);}
  100% { -webkit-transform: scale(1.0); }

}

Pada tahapan selanjutnya Anda cari instruksi </body> kemudian salin instruksi dibawah ini dan terapkan diatasnya.

<script type="text/javascript">
(function () {
    'use strict';
    var sajian = document.getElementById('menu'), about = document.getElementById('about'), projects = document.getElementById('projects');
    menu.onmousedown = function () {
        menu.className = '';
        about.className = '';
        projects.className = '';
    };
    menu.onclick = function () {
        if (about.style.left === '370px') {
            about.style.left = '205px';
            projects.style.left = '205px';
            menu.className = 'animone';
            about.className = 'animtwo';
            projects.className = 'animtwo';
        } else {
            about.style.left = '370px';
            projects.style.left = '50px';
            menu.className = 'animone';
            about.className = 'animtwo';
            projects.className = 'animtwo';
        }
    };
}());
</script>

Kemudian tahan berikutnya Anda cari instruksi <div id='main-wrapper'> kemudian salin instruksi dibawah ini dan terapkan dibawahnya .

<div class="wrapper">

<div class="animone" id="menu">

Menu</div>

<div class="animtwo" id="about" style="left: 205px;">

About</div>

<div class="animtwo" id="projects" style="left: 205px;">

Projects</div>

</div>

Semoga bermanfaat!




Sumber http://www.websiteedukasi.com/