close
Capture

W tym artykule pokażę Ci jak przy pomocy Particles.js stworzyć ciekawy efekt „cząsteczek” w tle kontenera. Cząsteczki będą dynamicznie dodawane i poruszane za pomocą myszki.

Na początku przygotujmy pliki. Potrzebujemy:

  • index.html
  • style.css
  • script.js
  • obrazek w tle

Możesz przygotować pliki sam lub pobrać je klikając tutaj. Mając gotowe pliki, możemy przejść do stworzenia struktury HTML. Pomiędzy znacznikami <body> wklej poniższy kod:

Szczególnie ważny jest div z id particles-js. To wewnątrz niego dodawane będą cząsteczki.

Przejdźmy teraz do pliku style.css. Wklej tam poniższy kod:

Na samej górze kodu znajduje się reset stylów. Następnie do body dodajemy tło obrazkowe (nie zapomnij zmienić nazwy obrazka).

Możemy teraz dodać ostatnią część – kod Javascript. Do pliku scripts.js dodaj poniższy kod:

Efekt cząsteczek jest już gotowy.

 

Źródło możesz zobaczyć tutaj.

Demo Devcorner możesz zobaczyć tutaj.

Gotową paczkę pobierzesz tutaj.

Tags : canvascząsteczkiparticles