Cara Menciptakan Kotak Deskripsi Effect Bounce

Cara Membuat Deskripsi Effect Bounce Seperti apa yang saya jelaskan sebelumnya pada Navigasi Bouncing, pada deskripsi berikut ini juga mempunyai effect yang sama adalah Bounce. Ketika Anda klik pada sajian maka akan muncul sebuah deskripsi dan effect Bounce atau memantul , effect yang muncul mengakibatkan tampilan lebih menarik.

bergerak memantul dengan memakai effect marquee. Namun pada Deskripsi Effect Bounce ini tidak memakai  marquee melaikan menggunkan -webkit-animation .

Demo   CODE

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

Tahap pertama Anda menuju Editor Template, kemudian Anda cari kode ]]></b:skin> kemudian salin arahan 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 arahan </body> kemudian Anda salin arahan dibawah ini :

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

Apabila pada Template Anda sudah terinstal arahan diatas, Anda dapat melewati langkah tersebut.

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

<script type="text/javascript>
var addRippleEffect = function (e) {
    var sasaran = 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 arahan di bawah ini dan pasangakan sesuai yang Anda kehendaki dapat 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 dapat memodifikasinya dengan menambahkan link pada kotak deskripsi atau yang lainnya

Semoga bermanfaat!

Share this post