CSS ile Material Design’ın Ripple Efekti

Google‘ın ses getiren tasarım trendi Material Design ile birlikte görmeye alıştığımız dalgalanma efektini CSS ve jQuery ile hazırlamak mümkün. Bu şık efekt kullanıcıya tıklama hissiyatını vermenin yeni yolu. Ö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.

Bu dersimizde su dalgalanmasını andıran bir tıklama efekti hazırlayacağız.

ÖRNEĞİ GÖRÜNTÜLE

CSS ile dalgalanma efekti nasıl hazırlanır?

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, 152, 219,.7);
  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);
    -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ı

Şimdi HTML’in herhangi bir yeri tıklandığında başlatılacak fonksiyonu tamamlayalım.

$("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 */
}

Material Design

Buraya küçük bir not düşelim. Material design hakkında ileriki günlerde bol bol konuşacağız.

İyi çalışmalar.