CSS ile Material Design’ın Ripple Efekti

google-material-designGoogle‘ı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.

Bu da ilginizi çekebilir  CSS3 Transition ile Geçiş Efektleri

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.



  • Hasan

    Çok iyi abi ya eyvallah

  • Mehmet Eldek

    WordPresse Bunu Nasıl Yapcaz Lütfen Yardım

  • matrax21

    merhaba hocam bende blogspot sitesine uyarladım sanki tam olmadı nasıl olacak. tıkladığın yerde kalıyor. sonra başka yere tıkladığında ilk tıkladığın yerden son tıkladığın yere doğu geliyor nasıl olacak yardım edebilir imisiniz?

    • Merhaba. Sitenizde tüm öğelere transition uygulanmasını sağlayan bir kod mevcut. Bildiğiniz gibi * işareti CSS’in tüm öğeleri seçen tanımıdır. Sizde de aşağıdaki gibi kodlar mevcut. Bu kodu kaldırmanız sorunu çözecektir.

      * {
      transition: all .5s ease;
      -webkit-transition: all .5s ease;
      -moz-transition: all .5s ease;
      -o-transition: all .5s ease;
      }

      • matrax21

        Çok teşekkürler Hocam. Sayenizde hallettim. Ha bu Arada küçük çapta da olsa blogger da el atsanız iyi olur 🙂

  • aliveli

    Yapamadım..

  • Batuhan

    Hocam çok sağol.Şimdi sitenizde bu dalga daha küçük bu büyüklük ve küçüklüğü nasıl ayarlayabiliriz.Baya araştırdım ama başarılı olamadım

  • hocam biraz acıklayıcı olurmusunuz, bu kodların hangisini nereye eklememiz gerekiyor.
    bu konuda sıkıntı yaşayanlar mevcut

  • Selamlar CSS için olan kodları tek bir çatıda

    Toplamak istedim lakin olmadı nasıl yapacağım konusunda yardımcı olurmusunuz ?

    Saygılarımla

  • Hamsi

    Bunların hangisini nereye yazıyoruz yahu

  • Selim

    oluşan dairenin bu sitedeki boyuttta olması için boyutunu nasıl ayarlayacağız ?

    • boyutları aynı herhalde rengi biraz daha açık olduğu için en büyük boyuta ulaştığında biraz farkedilmiyor daha küçük gibi gözüküyor.