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ü :
UstaDerslik
