Částicové pozadí

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

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.

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

3 názory na “Jak vytvořit unikátní pohyblivé částicové pozadí”

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

  2. 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

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte e-mail, ať o nic nepřijdete!

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Vylaďte WordPress stránky s naším tahákem

V e-booku najdete informace a rady pro WordPress od A do Z. Zadejte e-mail a my vám WordPress tahák pošleme.

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Přejít nahoru