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ü :
Bu plugini sitelerimiz de arkaplan olarak kullanabiliriz.
UstaDerslik
