Jquery Su Efekti Verme - ripples

Anasayfa

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

Jquery Su Efekti Verme - ripples

Tüm Hakları Saklıdır. ©Arleone 2013-UstaDerslik