Rellax.js - Volný Parallax funkce pomocí Vanilla JavaScript

Posouvání paralaxu vypadá neuvěřitelně, když se to dělá správně. Není to funkce, kterou budete chtít na každé webové stránce, ale pro kreativní stránky a vstupní stránky, prvky paralaxy upoutat pozornost rychle.

Existují tuny volných JavaScript knihoven pro animované efekty posouvání ale mnoho z nich je pro některé lidi nafouknuté nebo příliš složité.

Proto doporučuji Rellax.js pro vaše potřeby paralaxy. Je to bezplatný open source plugin postavený na vanillovém JavaScriptu nemá žádné závislosti.

Ve výchozím nastavení vyžaduje pouze jednoduché volání funkce přiřadit třídu paralaxy k elementům stránky. Potom, jak se budete posouvat, tyto prvky zůstat pevná a pohybovat se spolu s pohledem uživatele.

Tyto prvky můžete přizpůsobit tak, aby se zobrazovaly blíže, dále nebo za prvky stránky. Tím se vytvoří iluze hloubky na stránce a to vše funguje prostřednictvím jedné jednoduché JavaScript knihovny.

Pokud chcete stáhnout kopii, všechny zdroje kódu Rellax jsou zdarma k dispozici na webu GitHub.

Celé nastavení používá jednu funkci JS cílení na .rellax třída takto:

 var rellax = new Rellax ('. rellax'); 

Poznámka: můžete použít hodně jakékoli třídy, kterou chcete, ale příklad demo .rellax pro jednoduchost.

Odtud jen zabalte své paralaxové prvky uvnitř div s .rellax třídy a nastavte atribut rychlosti. To funguje přes rychlost-relalax-data vlastní atribut, který přijímá hodnoty od -10 do +10.

Tady je příklad fragmentu z HTML na demo stránce:

 
 Jsem extra pomalý a hladký 
 

Můžete také středové prvky na stránce a přizpůsobit pozice prvků prostřednictvím CSS.

Rellax vám neříká, jak strukturu stránky nebo jak definovat prvky CSS na stránce. Vše, co dělá, je vytvořit přirozený efekt rolování paralaxy s čistým JavaScriptem. Jak to používáte, je zcela na vás.

Chcete-li vidět živé demo, nahlédnout na hlavní stránku nebo procházet repo GitHub. To zahrnuje i nějakou dokumentaci, spolu s odkazy na živé webové stránky pomocí služby Rellax.js.

A nejlepší ze všeho je, že tým je neustále ochoten přijímat požadavky, takže pokud si všimnete jakýchkoli problémů nebo máte návrhy na funkce, pošlete do týmu rychlou zprávu..