JavaScript Kütüphanesi ile Etkileşimli Parçacıklar

Particles.JS, birden çok etkileşimli parçacığı oluşturan bir JavaScript kütüphanesi.

Kullanıcılarınızın ilgisini çekebilecek bu partikül yapısı birçok JavaScript kütüphanesinin aksine web sayfanızda ağır bir performans kaybına sebep olmuyor.

Örneği görüntüleyerek başlayabilirsiniz.

ÖRNEĞİ GÖRÜNTÜLE

Particles.JS Kullanımı

Vincent Garreau tarafından geliştirilen bu parçacık yapısını geliştirmek veya daha da özgünleştirmek istiyorsanız GitHub linkine göz atabilirsiniz.

HTML Kodları

Partiküller nerede gözükecek? Basit bir division elemanı ekleyelim.

<div id="particles-js"></div>

CSS Kodları

CSS tarafında bizi bekleyen bir tasarım yok. Ancak sayfa yapısındaki boşlukları kaldırıp canvas yapılarını blok tipe çevirmek işinizi kolaylaştıracaktır.

html,body 
 margin:0;


canvas
	display:block;
	vertical-align:bottom;


#particles-js
 height:100%;
 background:#b61924

JS Kodları

Temel haliyle çalışması için particle.js isimli dosyanın web sayfanıza eklenmesi gerekiyor.

<script src="http://vincentgarreau.com/particles.js/particles.js"></script>

Bunlara ek olarak Vincent’in varsayılan tanımını ekleyebiliriz :

particlesJS('particles-js', 
 particles: 
 color: '#fff',
 shape: 'circle',
 opacity: 1,
 size: 2.5,
 size_random: true,
 nb: 100,
 line_linked: 
 enable_auto: true,
 distance: 250,
 color: '#fff',
 opacity: 0.5,
 width: 1,
 condensed_mode: 
 enable: false,
 rotateX: 600,
 rotateY: 600
 
 ,
 anim: 
 enable: true,
 speed: 2
 
 ,
 interactivity: 
 enable: true,
 mouse: 
 distance: 200
 ,
 mode: 'grab'
 ,
 retina_detect: true
);

Nerelerde kullanılabilir?

Bu partikül yapısı sizlere de moleküllerin yapısını anımsatmadı mı? Özellikle de parçalar arasındaki değişken etkileşim bilimsel içerikli web sayfaları için birebir.

Yorumlarınızı bekliyoruz.

JavaScript Kütüphanesi ile Etkileşimli Parçacıklar