Ripple Efekt, Google Material Design

Sayfalarınız da tıklama hissiyatı vermek veya farklılık arayan arkadaşların kullanmak isteyeceği css ve jquery ile oluşturacağımız efekt ripple efekt.
Özellikle web sayfanızın mobil ekranlarında kullanmanızı önerebileceğimiz bu tasarımın örneğini aşağıdan görüntüleyebilirsiniz.

Kaydetmek için sağ tıklayıp farklı kaydet seçeneğini kullanabilirsiniz.

Bu efekt belirli bir bölgeyi etkileyecek şekilde hazırlanmalı. Bu işlem için de html elemanını tetiklemek en doğrusu. Bu yüzden HTML’i tablo yapısında gösterip 100% uzatsak jQuery’i besleyeceğimiz eleman hazırlanmış olur.

Daha sonra da ilk efekti, sonra efektin pozisyonlamasını, animasyonunu ve son olarak JavaScript kodlarını ekliyoruz. CSS kodlarımız ile başlayalım.

CSS Kodları
Yukarıda da dediğimiz gibi ilk olarak html öğesine 100% yükseklik ve tablo yapısı katalım.

html {
display:table;
height:100%;
}

Şimdi de dalgalanma efektini oluşturalım.

.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(52, 184, 144, 1);
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);
}

Şimdi de dalgalanma ismini verdiğimiz animasyonu hazırlayalım.

@keyframes dalgalanma {
100% {
opacity: 0;
-webkit-transform: scale(2); /*scala(2) parantez içerisinde bulunan sayıyı değiştirerek efekt boyutunu değiştirebilirsiniz. Örn. 0.5 , 0.6 gibi..
-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);
}
}

jQuery Kodları

$("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");
})

Şimdi işi biraz detaylandıralım.

Ripple efekti sadece mobil cihazlarda gözüksün ister misiniz?

Bu işlemi yapmak için birden fazla yol mevcut.

• WordPress sitelerde

WordPress’in wp_is_mobile() tanımlaması sayesinde ripple efekti sadece mobil cihazlarda gösterebiliriz. Yapmanız gereken kodları bu tanım içerisinde göstermek.

<?php
if ( wp_is_mobile() ) {
/* Kodlar buraya */
}
?>

jQuery ile mobil cihaz kontrolü

WordPress dışındaki tüm yapılarda mobil cihaz kontrolünü jQuery ile aşağıdaki şekilde yapabilirsiniz.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
/* Kodlar buraya */
}

WordPress sitenize uygulamanız için izleyebileceğiniz yol.

WordPress admin panelinizdenn Görünüm > Düzenleyici sekmesine giderek ilk önce css kodlarınızı style.css içerisinde herhangi bir yere uygulamanız daha sonra kaydedip çıkın. Sonrasında ise uygulamak istediğiniz sayfaya göre header.php gelerek head taglarının altında jQuery kütüphanenizi oluşturmak. Temanızda yüklü olabilir o yüzden önce denemenizi daha sonra jQuery kütüphanesini eklemelisiniz.

<script type='text/javascript' src='http://fatihtaskin.com.tr/js/jquery-1.11.1.min.js'></script>

Bu kodun hemen altına ise uygulamanın jQuery kodlarını ekleyerek tüm sayfanız da uygulamış olursunuz.