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

Vatanay Özbeyli Diğer Konular & İpuçları, jQuery

js-particlesParticles.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.