Cara Membuat Kotak Deskripsi Effect Bounce

Cara Membuat Deskripsi Effect Bounce ~ Seperti apa yang saya jelaskan sebelumnya pada Navigasi Bouncing, pada deskripsi berikut ini juga memiliki effect yang sama yaitu Bounce. Ketika Anda klik pada menu maka akan muncul sebuah deskripsi dan effect Bounce atau memantul , effect yang muncul menjadikan tampilan lebih menarik.

Untuk membuat memantul kita juga bisa membuatnya dengan menggunkan marquee seperti pada widget yang satu ini bergerak memantul dengan menggunakan effect marquee. Namun pada Deskripsi Effect Bounce ini tidak menggunakan  marquee melaikan menggunkan -webkit-animation .

Demo   CODE

Bagaimana Anda tertarik memasangnya pada Blog kesayangan Anda, baiklah sobat berikut ini yang perlu Anda lakukan tahap demi tahapannya :

Tahap pertama Anda menuju Editor Template, kemudian Anda cari kode ]]></b:skin> lalu salin kode dibawah ini dan pasangkan diatasnya atau sebelumnya .

/*Deskripsi Effect Bounce */
.container {
  width: 800px;
  display: block;
  margin: 25vh auto;
}

.button-text {
  padding: 5px;
  color: #fff;
  font-weight: normal;
  text-transform: none;
  font-size: 12px;
  margin-top: 10px;
  line-height: 16px;
  text-align: left;
  display: none;
  opacity: 0;
}

.blup {
  margin: 10px;
  display: inline-block;
  width: 60px;
  height: 60px;
  background-color: #b21b00;
  color: #df2b09;
  list-style: none;
  text-transform: uppercase;
  font-family: sans-serif;
  letter-spacing: 1px;
  font-weight: bold;
  border: none;
  border-radius: 100%;
  -webkit-animation: blup .8s both;
  transition: all 0.5s cubic-bezier(0.2, 0.8, 0.2, 1.15);
  overflow: hidden;
  -webkit-user-select: none;
  /*  box-shadow: 0px 8px 20px 0px rgba(0,0,0,.4);*/
}
.blup.active {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  -webkit-animation: blup .8s both;
}
.blup:active {
  -webkit-animation: inherite;
  -webkit-transform: scale(0.95);
  /*     box-shadow: 0px 2px 10px 0px rgba(0,0,0,.5);*/
}
.blup:focus {
  outline: none;
}

@-webkit-keyframes blup {
  0% {
    -webkit-transform: matrix3d(0.7, 0, 0, 0, 0, 0.7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  2.083333% {
    -webkit-transform: matrix3d(0.75266, 0, 0, 0, 0, 0.76342, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  4.166667% {
    -webkit-transform: matrix3d(0.81071, 0, 0, 0, 0, 0.84545, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  6.25% {
    -webkit-transform: matrix3d(0.86808, 0, 0, 0, 0, 0.9286, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  8.333333% {
    -webkit-transform: matrix3d(0.92038, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  10.416667% {
    -webkit-transform: matrix3d(0.96482, 0, 0, 0, 0, 1.05202, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  12.5% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.08204, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  14.583333% {
    -webkit-transform: matrix3d(1.02563, 0, 0, 0, 0, 1.09149, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  16.666667% {
    -webkit-transform: matrix3d(1.04227, 0, 0, 0, 0, 1.08453, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  18.75% {
    -webkit-transform: matrix3d(1.05102, 0, 0, 0, 0, 1.06666, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  20.833333% {
    -webkit-transform: matrix3d(1.05334, 0, 0, 0, 0, 1.04355, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  22.916667% {
    -webkit-transform: matrix3d(1.05078, 0, 0, 0, 0, 1.02012, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  25% {
    -webkit-transform: matrix3d(1.04487, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  27.083333% {
    -webkit-transform: matrix3d(1.03699, 0, 0, 0, 0, 0.98534, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  29.166667% {
    -webkit-transform: matrix3d(1.02831, 0, 0, 0, 0, 0.97688, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  31.25% {
    -webkit-transform: matrix3d(1.01973, 0, 0, 0, 0, 0.97422, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  33.333333% {
    -webkit-transform: matrix3d(1.01191, 0, 0, 0, 0, 0.97618, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  35.416667% {
    -webkit-transform: matrix3d(1.00526, 0, 0, 0, 0, 0.98122, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  37.5% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.98773, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  39.583333% {
    -webkit-transform: matrix3d(0.99617, 0, 0, 0, 0, 0.99433, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  41.666667% {
    -webkit-transform: matrix3d(0.99368, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  43.75% {
    -webkit-transform: matrix3d(0.99237, 0, 0, 0, 0, 1.00413, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  45.833333% {
    -webkit-transform: matrix3d(0.99202, 0, 0, 0, 0, 1.00651, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  47.916667% {
    -webkit-transform: matrix3d(0.99241, 0, 0, 0, 0, 1.00726, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  50% {
    -webkit-transform: matrix3d(0.99329, 0, 0, 0, 0, 1.00671, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  52.083333% {
    -webkit-transform: matrix3d(0.99447, 0, 0, 0, 0, 1.00529, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  54.166667% {
    -webkit-transform: matrix3d(0.99577, 0, 0, 0, 0, 1.00346, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  56.25% {
    -webkit-transform: matrix3d(0.99705, 0, 0, 0, 0, 1.0016, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  58.333333% {
    -webkit-transform: matrix3d(0.99822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  60.416667% {
    -webkit-transform: matrix3d(0.99921, 0, 0, 0, 0, 0.99884, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  62.5% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 0.99816, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  64.583333% {
    -webkit-transform: matrix3d(1.00057, 0, 0, 0, 0, 0.99795, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  66.666667% {
    -webkit-transform: matrix3d(1.00095, 0, 0, 0, 0, 0.99811, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  68.75% {
    -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99851, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  70.833333% {
    -webkit-transform: matrix3d(1.00119, 0, 0, 0, 0, 0.99903, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  72.916667% {
    -webkit-transform: matrix3d(1.00114, 0, 0, 0, 0, 0.99955, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  75% {
    -webkit-transform: matrix3d(1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  77.083333% {
    -webkit-transform: matrix3d(1.00083, 0, 0, 0, 0, 1.00033, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  79.166667% {
    -webkit-transform: matrix3d(1.00063, 0, 0, 0, 0, 1.00052, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  81.25% {
    -webkit-transform: matrix3d(1.00044, 0, 0, 0, 0, 1.00058, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  83.333333% {
    -webkit-transform: matrix3d(1.00027, 0, 0, 0, 0, 1.00053, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  85.416667% {
    -webkit-transform: matrix3d(1.00012, 0, 0, 0, 0, 1.00042, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  87.5% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.00027, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  89.583333% {
    -webkit-transform: matrix3d(0.99991, 0, 0, 0, 0, 1.00013, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  91.666667% {
    -webkit-transform: matrix3d(0.99986, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  93.75% {
    -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99991, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  95.833333% {
    -webkit-transform: matrix3d(0.99982, 0, 0, 0, 0, 0.99985, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  97.916667% {
    -webkit-transform: matrix3d(0.99983, 0, 0, 0, 0, 0.99984, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
  100% {
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
  }
}
.ripple {
  position: absolute;
  background: rgba(0, 0, 0, 0.15);
  border-radius: 100%;
  -webkit-transform: scale(0);
  pointer-events: none;
}
.ripple.show {
  -webkit-animation: ripple .75s ease-out;
}

@-webkit-keyframes ripple {
  to {
    -webkit-transform: scale(3);
    opacity: 0;
  }
}

Pada tahapan kedua Anda cari kode </body> kemudian Anda salin kode dibawah ini :

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"/>

Apabila pada Template Anda sudah terinstal kode diatas, Anda bisa melewati langkah tersebut.

Tahapan ketiga masih pada kode </body> , silahkan Anda salin kode dibawah ini kemudian pasangkan diatasnya atau dibawah kode diatas.

<script type="text/javascript>
var addRippleEffect = function (e) {
    var target = e.target;
    if (target.tagName.toLowerCase() !== 'button')
        return false;
    var rect = target.getBoundingClientRect();
    var ripple = target.querySelector('.ripple');
    if (!ripple) {
        ripple = document.createElement('span');
        ripple.className = 'ripple';
        ripple.style.height = ripple.style.width = Math.max(rect.width, rect.height) + 'px';
        target.appendChild(ripple);
    }
    ripple.classList.remove('show');
    var top = e.pageY - rect.top - ripple.offsetHeight / 4 - document.body.scrollTop;
    var left = e.pageX - rect.left - ripple.offsetWidth / 4 - document.body.scrollLeft;
    ripple.style.top = top + 'px';
    ripple.style.left = left + 'px';
    ripple.classList.add('show');
    ripple.classList.add('grow');
    return false;
};
document.addEventListener('click', addRippleEffect, false);
function morph() {
    var morphSniff = $(this).css('border-radius');
    if (morphSniff == '100%') {
        $(this).css('border-radius', '0%');
        $(this).children('.button-text').slideToggle().animate({ 'opacity': '1' }, 400);
    } else {
        $(this).css('border-radius', '100%');
        $(this).children('.button-text').animate({ 'opacity': '0' }, 0).slideToggle();
    }
}
;
$('button').click(function () {
    morph.call(this);
});
</script>

Tahapan keempat, pemasangan HTML. Silahakan Anda copy kode di bawah ini dan pasangakan sesuai yang Anda kehendaki bisa pada Widget, postingan atau yang lainnya .

<div class="container">

  <button class="blup active">Define<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: -27px; left: 28.5px;"></span></button>

  <button class="blup active">Describe<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: -5px; left: 46.5px;"></span></button>

  <button class="blup active">Discover<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: -27px; left: 53.5px;"></span></button>

  <button class="blup active">Design<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div></button>

  <button class="blup active">Develop<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: 56px; left: 26.5px;"></span></button>

  <button class="blup active">Deliver<div class="button-text">SILAHKAN ANDA MASUKAN TEKS ANDA DISINI</div><span class="ripple show grow" style="width: 140px; height: 140px; top: 60px; left: 55.5px;"></span></button>

</div>

Anda bisa memodifikasinya dengan menambahkan link pada kotak deskripsi atau yang lainnya

Semoga bermanfaat!

Bagikan Artikel ini