Fare Tıklaması Dalgalanma Efekti

Mouse Click Ripple Effect Code

Mobil internet kullanımının hızla artması sonucunda web sitelerinin mobil arayüzlerinde kullanım kolaylığı oluşturmaya yönelik tasarımları ön plana çıkarttı. Google Material Design ile görmeye alıştığımız dalgalanma efekti özellikle cep telefonu gibi dokunmatik yüzeylerde kullanıcıya tıklama hissiyatı vermenin çok şık bir yoludur.

Fare imleci tıklama dalgalanma efektini CCS ve JS kodları ile kolayca sitemize ekleyebiliriz. Kodlar açık ve sadece site içinden çalıştığı için mobil arayüze önem veren her blogcunun kullanmasının faydalı olacağı düşüncesindeyim.

Fare İmleci Tıklamasından Dalgalanma Efekti Oluşturma Kodu

<style>
}
.dalgalanma {
  position: relative;
  overflow: hidden;
  -webkit-transform: translate(0);
}
.efekt {
  display: block;
  position: absolute;
  pointer-events: none;
  border-radius: 50%;
  transform: scale(0);
  z-index:9999;
  background: rgba(255, 255, 0,.7);
  opacity: 1;
  width:5em; height:5em;
}
.efekt.oynat {
  -webkit-animation: dalgalanma 2s cubic-bezier(0.165, 0.85, 0.45, 1);
  -o-animation: dalgalanma 2s cubic-bezier(0.165, 0.85, 0.45, 1);
  animation: dalgalanma 2s cubic-bezier(0.165, 0.85, 0.45, 1);
}
@keyframes dalgalanma {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-webkit-keyframes dalgalanma {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-moz-keyframes dalgalanma {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-ms-keyframes dalgalanma {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
}
@-o-keyframes dalgalanma {
  100% {
    opacity: 0;
    -webkit-transform: scale(2);
    -ms-transform: scale(2);
    -o-transform: scale(2);
    transform: scale(2);
  }
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
$("html").click(function(e){
    var ripple = $(this);
    if(ripple.find(".efekt").length == 0) {
        ripple.append("<span class='efekt'></span>");
    }
    var efekt = ripple.find(".efekt");
    efekt.removeClass("oynat");
    if(!efekt.height() && !efekt.width())
    {
        var d = Math.max(ripple.outerWidth(), ripple.outerHeight());
        efekt.css({height: d/5, width: d/5});
    }
    var x = e.pageX - ripple.offset().left - efekt.width()/2;
    var y = e.pageY - ripple.offset().top - efekt.height()/2;
    efekt.css({
        top: y+'px',
        left:x+'px'
    }).addClass("oynat");
})

})
</script>

Fare İmleci Tıklamasından Halka Dalgalanma Efekti Oluşturma Kodu

<style type="text/css">
div.clickEffect{
 position:fixed;
 box-sizing:border-box;
 border-style:solid;
 border-color:#ffff00;
 border-radius:50%;
 animation:clickEffect 0.4s ease-out;
 z-index:99999;
}
@keyframes clickEffect{
 0%{
  opacity:1;
  width:0.5em; height:0.5em;
  margin:-0.25em;
  border-width:0.5rem;
 }
 100%{
  opacity:0.2;
  width:15em; height:15em;
  margin:-7.5em;
  border-width:0.03rem;
 }
}
</style>
<script type="text/javascript">
function clickEffect(e){
 var d=document.createElement("div");
 d.className="clickEffect";
 d.style.top=e.clientY+"px";d.style.left=e.clientX+"px";
 document.body.appendChild(d);
 d.addEventListener('animationend',function(){d.parentElement.removeChild(d);}.bind(this));
}
document.addEventListener('click',clickEffect);
</script>

HTML / JAVASCRIPT EKLEMEK

Tema içinde kullanmak için :

Blogger > Tema > HTML'yi Düzenle > "ilgili bölüm"

Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz

Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.

* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod editörünü kullanabilirsiniz.