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 yakni Bounce. Ketika Anda klik pada sajian maka akan muncul sebuah deskripsi dan effect Bounce atau memantul , effect yang muncul mengakibatkan tampilan lebih menarik.

Untuk menciptakan memantul kita juga dapat membuatnya dengan menggunkan marquee menyerupai pada widget yang satu ini 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, oke sahabat berikut ini yang perlu Anda lakukan tahap demi tahapannya :

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

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

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

Tahapan ketiga masih pada isyarat </body> , silahkan Anda salin isyarat dibawah ini kemudian pasangkan diatasnya atau dibawah isyarat 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 isyarat 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!







Sumber http://www.websiteedukasi.com/