Jquery ParticleGround Plugin

Anasayfa

Bu dersimiz de jquerynin Particleground adlı pluginini işleyeceğiz.Particleground html5 canvası kullanarak seçtiğimiz alan da rasgele hareket eden noktaları çizgilerle birbirine bağlayan bir efekt plugini.Örneği incelediğiniz de daha iyi anlarsınız.Kullanımına geçelim.

İncele : http://ustaderslik.com/ornek/Particleground/

İndir : http://ustaderslik.com/dosya/Particleground.zip

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

Plugin dosyasını dahil ettikten sonra,bu şekil de plugini uyguluyoruz.Bazı parametreleri bulunmakta,onları inceleyelim.

minSpeedX : x eksenindeki minimum hız.
maxSpeedX : x eksenindeki maxsimum hız.
minSpeedY : y eksenindeki minimum hız.
maxSpeedY : y eksenindeki maxsimum hız.
density : Bağlanma yoğunluğu.Normal 10000 dir.Azaldıkça artar.
dotColor : Nokta rengi.
lineColor : Çizgi rengi.
particleRadius : Noktanın yarıçapı.Normali 7.
lineWidth : Çizginin kalınlığı.Normali 1.
parallax : Mouseye göre hareket.Noral truedir.

Parametrelerimiz bu kadar.

Genel örnek :

<!DOCTYPE HTML>

<html lang="en-US">

<head>

	<meta charset="UTF-8">

	<title>UstaDerslik</title>

	<script type="text/javascript" src="jquery-1.11.1.min.js"></script>

	<script type="text/javascript" src="jquery.particleground.min.js"></script>

	<script type="text/javascript">

		$(function(){

			$('#alan').particleground({

				dotColor: '#fff',

				lineColor: '#fff',

				particleRadius:4,

				density:7000,

				lineWidth:.7

			});

		})

	</script>

	<style type="text/css">

		body{background:#15d4f5;}

		#alan{width:900px;height:400px;margin:auto;}

	</style>

</head>

<body>

	

	<div id="alan"></div>

	

</body>

</html>

Görüntüsü :

http://ustaderslik.com/resim/ders/5a2sd520x.png

Bu plugini sitelerimiz de arkaplan olarak kullanabiliriz.

Jquery ParticleGround Plugin

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