Salih Toy - Kişisel Web Defteri

CSS Ile Ripple Efekti Verin

CSS İle Ripple Efekti Verin

Merhaba Arkadaşlar.

Uzun süredir sınav yoğunluğundan dolayı yazı giremedim. Ancak yavaş yavaş telafi ediyorum.

Şimdi bu yazımız ile sizlere çok hoş güzel bir CSS3 efekti paylaşacağım. Çok az bile olsa temalarınız veya yazılarınız için renk katablirsiniz. Canlı önizleme sunacağım ve nasıl bir efekt olduğunu görebileceksiniz. Hoşunuza gideceğinden eminim.

Şimdi başlayalım...

Canlı önizleme için: Şuan bulunduğunuz sayfanın herhangi bir boş alanında mouse ile sol tik yapın. Sanırım bir anda ortaya çıkan ve yeşil renginde olan efekti gördünüz. Ve şuan siz de aynısından istiyorsunuz?

Aşağıda bulunan temel kaynak kodlarını kullanarak aynı efekti uygulayabilirsiniz...


NOT: Kodları kopyalarken alt satırda oluşan kaynak URL kısmını silmeyi unutmayın!


Öncelikle Script Kodları

İlk olarak aşağıda bulunan jquery 3.3.1 Script HTML etiketini temanız da uygun alana ekleyin.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Daha sonra...

<script type="text/javascript">
$("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>

Script kodlarını sırası ile temanıza uygun alana ekleyin...

Şimdi Sıra CSS'de

Efektin hangi komut ile çalıştırılacağını yukarda Script kodları ile hallettik. Şimdi sıra efektin nasıl görüneceği ile ilgili CSS kodlarına geldi.

Aşağıda bulunan tüm CSS kodlarını alın ve temanız da uygun alana yerleştirin.

.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-color:#000;
  height:30px;
  opacity: 1;
}
 
.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);
  }
}

Düzenleme

Doğru şekilde uyguladığınız zaman sorunsuz bu güzel efekti kullanabilirsiniz. Ayrıca renk ve yükseklik gibi değerler ile oynamak için CSS içinde bulunan:

background-color:#000;
height:30px;

Kodlar ile oynayabilirsiniz.

Son Olarak

Tekrar'dan güzel bir makale olduğunu düşünüyorum. Çalışmalarınız için renkli olabilir türden. Daha nice bu tür yazılar geleceğini unutmayın. Sorun yaşarsanız yorum alanını kullanmayı da unutmayın.

kendinize iyi bakın, hoşçakalın...

Salih Toy

Yazar: Salih Toy

Uzun yıllar boyunca kendimi bilgisayar konusunda geliştirdim, şuan WordPress, HTML ve CSS ile ilgileniyorum. Aynı zaman da faydalı olabilmek adına bilgilerimi sizlerle paylaşarak bilgiye bilgi katmak istiyorum...


Yorumlar & Yorum Yapın

=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=