HTML & CSS

CSS İle Ripple Efekti Verin

CSS İle Ripple Efekti Verin Editör Puanı: 5 Üzerinden 3.9

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…

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

Bu Yazı İçin Ne Hissediyorsun?
Beğendim Sevindim Komik Şaşırdım Üzgünüm Sinirlendim

Kim Bu Yazar? - RocaniX

Anonim

Uzun süre boyunca bilgisayar ile uğraşarak kendimi geliştirdim. Şuan iyi derece de WordPress, HTML ve CSS ile ilgileniyorum. Aynı zaman da blog üzerinden web tasarım başlığı altında makaleler yazarak, web tasarım merak salmış dostlarıma da az çok yardım ediyorum.

Bu Yazıyı 1 Kişi Yorumlamış

  1. Deniz Durmaz
    Deniz Durmaz

    Merhabalar Salih Bey…
    Bu eklentiyi wordpress için optimize edebilir misiniz ?
    Teşekkürler

    Sitemiz = www.mavikunduz.tk

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir