O projektu
DotWave.js je JavaScriptová knihovna, díky které lze jednoduše vytvářet HTML prvky s paralax efektem teček. Kód knihovny je open-source a je všem zdarma dostupný k použití a úpravám. Knihovnu jsem vytvářel primárně pro své webové stránky, ale může být užitečná i pro další projekty, které vyžadují podobný efekt.
Ukázka
Jak to funguje
Kód používá IIFE (zkratka pro "Immediately Invoked Function Expression"), díky tomu nebude narušovat globální proměnné a funkce. Po inicializování DotWave knihovna vytvoří canvas element, připojí ho k vybranému kontejneru a nastaví pro něj správné rozměry. Poté vygeneruje tečky s náhodnými vlastnostmi, přidá funkci na detekci pohybu myši a změnu velikosti okna, a spustí smyčku, která tečky animuje.
Vlastnosti teček
- Pozice (souřadnice x, y)
- Hloubka (hodnota z, kde 0 = daleko, 1 = blízko)
- Velikost (poloměr v pixelech)
- Průhlednost (založená na hloubce)
- Rychlost (vx a vy pro pohyb)
- Znásobení rychlosti (hlubší tečky se pohybují pomaleji)
Postup animace
- Vymaže canvas
- Pro každou tečku vypočítá vzdálenost od kurzoru
- Přídá rychlost a směr podle kurzoru myši
- Přidá trochu náhodnosti
- Podle tření se tečky zpomalí
- Aktualizuje pozici tečky
- Vykreslí tečku na nové pozici