Webové stránky s rolovacími animacemi jsou v dnešní době v módě. Proto vám dnes ukážeme několik praktických příkladů pro jejich stavbu. Tento článek si můžete představit jako sbírku stavebních bloků, které můžete kombinovat do působivé interaktivní webové stránky.
Základní myšlenka
Obvyklým způsobem, jak jsou tyto webové stránky vytvořeny, je použití knihovny JavaScript. Některé z oblíbených možností jsou Scrollr, scrollMagic, Parallax.js, scrollReveal.js a další. Dnes budeme používat Scrollr, protože je nejoblíbenější a funguje na mobilních zařízeních.
Chcete-li použít Scrollr, stačí si stáhnout jeho zdrojový kód a vytvořit na něj odkaz ve svém HTML. Poté zavolejte skrollr.init(); povolí Scrollr pro všechny prvky na stránce.
<script src="assets/skrollr.min.js"></script>
<script>
skrollr.init();
</script> Knihovna je velmi výkonná a můžete s ní vytvářet nejrůznější rolovací animace. Podívejte se na web, který jsme s ním dokázali vytvořit:
Chcete se dozvědět, jak to bylo vyrobeno? Pokračujte ve čtení!
Úvod do Scrollr
Jakmile budete mít na stránce knihovnu Scrollr, přidáte datové atributy k prvkům, které chcete animovat, zatímco se stránka posouvá. Zde je nejzákladnější příklad, který animuje div z modré na červenou:
<div data-bottom-top="background-color: rgb(255,0,0);" data-center-center="background-color: rgb(0,0,255);"> </div>
Máme jednoduchý div s dvojicí atributů. První atribut řekne Scrollru, kdy animace začne, a druhý, kdy by měla skončit. Jak můžete vidět, samotná animace se provádí pomocí vlastností CSS (všimněte si, že barvy musíte zadat jako rgb). Knihovna plynule přechází z jedné do druhé.
Pomocí těchto datových atributů můžete vytvářet nejrůznější zajímavé efekty. Zde je několik praktických příkladů, které vám ukáží, co můžete udělat.
1. Paralaxní úvod
Paralaxa je pravděpodobně nejoblíbenější rolovací animace, kterou v těchto dnech vidíme. Skládá se z obrovského pevného obrázku rozprostírajícího se po pozadí, z něhož vidíme jen část v závislosti na tom, jak daleko jsme se posunuli.
Kromě toho je naše paralaxa jen obrázek uvnitř wrapper div s přechody při různých rychlostech a nějakým chytrým CSS.
2. Hlavní text
Zde máme tři vložené odstavce, které se objeví jeden po druhém. Dosáhli jsme toho pomocí offsetů, které říkají knihovně, aby spustila animaci dříve, než by normálně měla.
3. Seznam funkcí
Seznamy funkcí jsou místem, kde předvedete, co váš produkt umí. Velké ikony a text nesmí chybět, ale vše můžete okořenit i poutavými animacemi. V našem příkladu se funkce zobrazí z různých stran obrazovky.
4. O nás
Náš příklad „O nás“ se skládá z pěkně kruhových avatarů zarovnaných do dvou řad. Obrázky v prvním řádku se otočí po směru hodinových ručiček a obrázky v druhém řádku se překlopí vodorovně.
5. Galerie
Pro ukázku naší galerie jsme připravili krásnou animaci posouvání. Skládá se ze sady obrázků ve dvou řadách. První řada se pohybuje zprava doleva a druhá řada se pohybuje v opačném směru. Dokončení této animace nějakou dobu trvá, a protože nechceme, aby naše galerie opustila obrazovku, aniž by dokončila její přechod, rolování na chvíli pozastavíme.
6. Zápatí
Pro sekci zápatí jsme použili jednu z našich šablon zdarma a změnili jsme pouze barvy. Když zápatí vstoupí na obrazovku, zvětší se šířka vyhledávacího pruhu uvnitř něj.
Doufáme, že se vám naše příklady líbily! O Scrollru se toho můžete hodně dozvědět. Má velmi podrobnou dokumentaci, která pokrývá každý aspekt knihovny.