Mouse Tıklama Efekt Kodu (Animasyonlu)

Mobil internet kullanımının hızla yaygınlaşması, web sitelerinin mobil uyumlu arayüzlerinde kullanıcı dostu tasarımlar oluşturmayı öncelikli hale getirdi. Google Material Design ile popülerlik kazanan dalgalanma efekti, özellikle dokunmatik ekranlı cihazlarda tıklama hissini şık bir şekilde vermenin harika bir yöntemidir.

Fare tıklaması ile oluşan bu dalgalanma efektini, CSS ve JavaScript kullanarak kolayca web sitenize entegre edebilirsiniz. Bu kodlar basit ve yalnızca site içerisinde çalıştığından, mobil kullanıcı deneyimine önem veren tüm web sitesi sahipleri için faydalı olacaktır.

<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>

Mobil internetin hızla yaygınlaşmasıyla, web sitelerinin mobil arayüzlerinde kullanıcı dostu tasarımlara odaklanması ön plana çıkmıştır. Google Material Design ile aşina olduğumuz dalgalanma efekti, özellikle dokunmatik yüzeylerde tıklama hissini şık bir şekilde iletmenin etkili bir yoludur.

Fare tıklaması ile dalgalanma efekti oluşturmak için CSS ve JavaScript kodları kullanarak bu özelliği web sitenize ekleyebilirsiniz. Kodlar açık ve yalnızca site içinde çalıştığından, mobil arayüze önem veren tüm blog yazarları için faydalı olacağını düşünüyorum.

Mobil internet kullanımının hızla artması, web sitelerinin mobil arayüzlerinde kullanıcı dostu tasarımlar geliştirmeyi önemli hale getirdi. Google Material Design’da gördüğümüz dalgalanma efekti, özellikle dokunmatik cihazlarda tıklama hissini zarif bir şekilde iletmenin mükemmel bir yoludur.

<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>

Fare tıklamasıyla oluşan bu dalgalanma efektini, CSS ve JavaScript kullanarak kolayca web sitenize ekleyebilirsiniz. Bu kodlar sade ve yalnızca site içerisinde çalıştığı için, mobil kullanıcı deneyimine önem veren tüm blog sahipleri için kullanışlı olacaktır.