WordPress návody

Jak vytvořit unikátní pohyblivé částicové pozadí

Částicové pozadí
Autor příspěvku Tomáš Cirkl

Pohyblivé částicové pozadí lze použít k oživení stránky. Pozadí je interaktivní a reaguje na pohyb kurzoru myši a klikání. V tomto článku si ukážeme jak do WordPress stránky přidat pohyblivé částicové pozadí.

Budeme k tomu potřebovat plugin WP Particles Plugin. Plugin se nachází na GitHubu a po stažení zipu jej můžete nainstalovat do WordPress přes administraci nebo přes FTP.

Po instalaci a aktivaci pluginu běžte ve WordPress administraci do nové sekce Particle Background.

Particle Background

Particle Background

Sem je zapotřebí vložit JSON kód s nastavením pozadí.

Kód pro částicové pozadí získáte v tomto nástroji – particle.js configuration.

V pravém horním rohu najdete možnosti nastavení, které můžete pro tvorbu pohyblivého částicového pozadí použít.

Měnit můžete:

  • barvu
  • rychlost
  • počet vzorů
  • velikost
  • průhlednost

a mnohé další…

Nastavení částicového pozadí

Nastavení částicového pozadí

Jakmile máte všechno nastavené, klikněte na poslední možnost Download current config (json).

Stáhnout JSON

Stáhnout JSON

Do počítače se vám stáhne soubor, který můžete například pomocí Notepad++ otevřít. Jeho obsah pak zkopírujte celý do pole nastavení pluginu.

Zkopírované nastavení pozadí

Zkopírované nastavení pozadí

Nyní je potřeba přiřadit ID pozadí. To uděláte tak, že nad zkopírovaný kód vložíte particlesJS (“particlesID”, a za zkopírovaný kód vložíte );.

particlesJS ("particlesID",
zde nechte zkopírovaný obsah nastavení
);

Vše uložte.

Přiřazení ID

Přiřazení ID

Posledním krokem je přiřazení ID k divu na stránce, který pak dostane připravený efekt pozadí. V tuto chvíli mají výhodu ti, kteří používají některý page builder (Divi, Elementor …), protože pro přiřazení ID jim stačí rozhraní builderu a nemusí do zdrojového kódu.

Například v Divi ID přiřadíte tak, že si otevřete prvek, kde chcete nastavit pozadí. V otevřeném nastavení půjdete na záložku Pokročilé a do pole ID vložíte vaše ID (particlesID). Prvku nezapomeňte nastavit barevné pozadí, aby byly částice vidět.

Vložení ID k divu v Divi

Vložení ID k divu v Divi

Vše uložíte a máte hotovo.

Jak vypadá pohyblivé částicové pozadí na živém webu si můžete prohlédnout například na Toret.cz.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

3 komentáře

  • Ahoj Tome udělal jsem vše podle návodu a přesto bez efektu… Nevíš prosím kde by mohla být chyba?

    • Ahoj,
      zkus promazat cache, koukni jestli se ti ten skript netluče. Ujisti se, že to ID je na prvku nastaveno správně a je i v tom skriptu.

  • Oprava a možná nápad na dodání do článku: Je potřeba nastavit nějaké barevné pozadí sekce kde budou částice… Na bílém to nelze vidět

Zanechat komentář

Získejte více informací o WordPress!

Připojte se do našeho emailového seznamu a nenechte si ujít informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 3 roky. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.