Jquery Su Efekti Verme - ripples
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Su Efekti Verme - ripples

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1666)
RAPOR ET
Bu dersimiz de ripples adlı jquery pluginini işleyeceğiz.Ripples sayesin de sayfamız da istediğimiz yere su efekti verebiliriz.Normal sitelerimiz de çok işe yarayacak bir özellik değil ama görsel açıdan önemli tasarımlar da kullanabiliriz.

İncele : http://ustaderslik.com/ornek/jquery-ripples/

İndir : http://ustaderslik.com/dosya/jquery-ripples.zip

$('.seçici').ripples();

Bu şekil de plugini istediğimiz yere uygulayabiliriz.Bazı parametreler mevcut.Bunları inceleyelim.

resolution : Su kalitesini belirler.512 idealdir.
dropRadius : Dalgaların çapları.10 civarı sayılar iyidir.
perturbance : Bunu tam anlatamıyorum ama suyun şeffaaflığı diyelim.0.04 gibi küçük rakamlar kullanmalıyız.Daha büyükleri kötü görünüm sunar.

Not : Html5 webgl teknolojisi kullandığı için direk olarak önizleme sağlayamayız.Sunucuya atıp önizlememiz gerek.

Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>Jquery Su Efekti</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.ripples.js"></script>
<script type="text/javascript">
$(function(){
$('.alan').ripples({
resolution:512,
dropRadius: 7,
perturbance: 0.01
});
});
</script>
<style type="text/css">
*{margin:0;padding:0;}
.alan{height:1280px;background:url(arkaplan.jpg) no-repeat;}
</style>
</head>
<body>

<div class="alan"></div>

</body>
</html>

Görüntüsü :
http://ustaderslik.com/resim/ders/11g1ad0sf0e.png



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol