Jquery ParticleGround Plugin
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 ParticleGround Plugin

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(1950)
RAPOR ET
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.



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