Google Material Design Ripple Efekti – jQuery

Google Material Design Ripple Efekti – jQuery
54

Bugün kü yazımda günümüzün popüler tasarım trendi google material design ile sıkça görmeye başladığımız fare etkileşimini konu alıyorum.  Makalemde dalganma efektini yaratmak jquery eklentisi yaratacağız.

Google material design hakkında bilgi edinmek istiyorsanız tıklayın.

[indir]Demo Downlaod[/indir]

Dalgalanma Efekti nasıl yaratılır?

1. Web sayfamızda buton oluşturalım.


<button>Tıklayın</button>

2. jQuery kütüphanesi ve oluşturacağız jQuery eklentisini web sayfamıza çağıralım.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/mawbutton.js"></script>

3. Örnek butonumuza stil uygulayalım

.mawbutton {
  outline: none;
  border: 0px;
  width: 221px;
  height: 54px;
  background-color: #0C9AF2;
  overflow: hidden;
  position: relative;
  border-radius: 9px;
  font-size: 20px;
  letter-spacing: 2px;
  color: white;
  font-family: 'Lobster', cursive;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
  -o-user-select: none;
}

4. CSS ve CSS3 transitions geçişlerini kullanarak dalgalanma efekti yaratalım.

.mawbutton .mawbutton-ripple {
  position: absolute;
  border-radius: 100%;
  width: 0px;
  height: 0px;
  background: rgba(248,248,255, .2);
  transition: all 150ms ease-out;
  -webkit-transition: all 150ms ease-out;
  -moz-transition: all 150ms ease-out;
  -o-transition: all 150ms ease-out;
}
 
.mawbutton .mawbutton-ripple-out {
  background: rgba(248,248,255, .0);
  transition: background 150ms ease-out opacity 150ms ease-out;
  -webkit-transition: background 150ms ease-out opacity 150ms ease-out;
  -moz-transition: background 150ms ease-out;
  -o-transition: background 150ms ease-out;
}
 
.mawbutton .mawbutton-stop {
  -webkit-transition: none !important;
  transition: none !important;
}

5. Butona tıklandığında jquery yardımıyla dalgalanma efektini etkinleştirelim.

[js]$(‘button’).mawbutton({
speed : 250, // The duration which are given in milliseconds of effect.
scale : 6, // The size how the ripple will scale to in animation.
effect : "ripple", // ripple only in this version
transitionEnd:function(){ // callback when transition ends.
console.log(‘end’);
}
});[/js]

[bilgi]Bu jQuery eklentisi Yuhua Chen tarafından geliştirilmiştir.[/bilgi]

Yorum Yap