12 Trendy animace esenciálních scroll-to-view
Animované elementy stránek jsou na vstupních a spouštěcích webových stránkách velmi běžné. Ale v designových kruzích se o nich vždy nehovoří, protože myšlenka "animovat na pohled" není hodně pokryta.
Používám frázi scroll-to-view, protože vypadá jako přesný popis. V podstatě při procházení stránky se objevují nové animované prvky.
Není to technika, která funguje pro všechny webové stránky, ale přidává pěkný dojem v určitých rozloženích. A já jsem si vybral některé z mých oblíbených, abych ukázal, jak fungují tyto animace pro posouvání a proč byste se sami pokusili sami použít.
1. Zítřejší spánek
Na Zítřejší spánek webových stránek si všimnete několika poměrně blažených animovaných efektů. Tyto prvky ztlumí různé části textu a CTA v celém rozložení.
Zajímavé je, jak je většina obrazů a oblastí pozadí plně viditelná i při prvním posouvání. Mnoho webových stránek používá animaci blednutí pro zobrazení obrázků a snímků obrazovky při zachování textu viditelného.
Tento menší rozdíl pomáhá upoutat pozornost na text, jak se vymyká. Skvělý způsob, jak zachytit pozornost od návštěvníků, kteří procházejí.
2. Twist
Další techniku, kterou často vidím, je zaměřena na většinu obsahu stránky pro animace na scrollu.
Například Twist domovská stránka aplikace obsahuje různé segmenty stránek a bloky textu, které se pohybují v roli posouvání a mimo obrazovku. Ty mají velmi měkký efekt blednutí, takže jsou viditelné, ale nejsou příliš tvrdé.
Někteří návštěvníci mohou být zpožděni, ale nemyslím si, že je to příliš dlouhé. Navíc se animuje pouze jednou, takže pokud narazíte na spodní stranu stránky, budou všechny animace hotové.
3. Aplikace příze
Pro mnohem složitější animace se podívejte na Příze App přistání. Ten má mnohočetné animace a dokonce i prvky, které se dostanou do pohledu z různých úhlů.
Některé z demo obrázků obrazovky se animují směrem vzhůru, zatímco doprovodný text / BG vzory animují dolů do pohledu. Tento střídavý styl je docela jedinečný a není to něco, co vidím často.
Nicméně vstupní stránka je také neuvěřitelně jednoduchá a není tu ještě moc, abyste si pozorně uvědomili. V tomto případě fungují různé animace.
4. DashFlow
Ze všech těchto příkladů si myslím DashFlow používá nejběžnější techniky animace.
Tento lander animuje obrázky a text do dohledu všech v jednom posezení. Je to opravdu jednoduché a používá rozložení v jednom sloupci, takže veškerý obsah teče přímo do lineární cesty.
Nic zvláštního o tomto designu není mimo velmi jasný způsob animace položek na svitek. Skvělý styl, pokud máte podobnou webovou stránku a chcete animace jednoduše udržet.
5. Quuu Promote
Quuu Promote udržuje animace na minimu a používá je pouze v oblastech CTA.
Nemohu říct, jestli to zvyšuje konverze, ale zdá se, že to je cíl. Při prvním načtení stránky se vrchní hlavička animuje do pohledu s nakloněnou animací na CTA.
Když se posunete dolů, všimnete si, že zbytek stránky je docela statický. Ale v dolní části je jedna poslední CTA nad zápatí, která také animuje a běží stejnou nakláněcí animaci.
Snaží se ukázat, že máte animační efekty, které se nepoužívají po celé stránce.
6. Qonto
Domovská stránka pro Qonto má zajímavý záběr na animaci scroll-to-view. Používá stejný typ animace na celém webu a animuje jednotlivé položky ze strany.
Většina stránek obsahuje části ikon, které obsahují malou grafiku nad určitým obsahem vysvětlujícím funkce aplikace. Ne příliš jemné, ale ani příliš zřetelné.
Navíc najdete v hlavičce několik dalších animačních stylů spolu s některými BG obrázky, které se ztlumí. Tato stránka je jen nádherný příklad toho, co web animace může udělat.
7. Výlet
Pro příklad jemných animací zkontrolujte Túra .
Jejich stránky střídají mezi animovanými prvky a pevnými prvky. Ovšem efekty animace jsou rychlé, takže se necítíte otráveně čekáním na viditelný obsah.
To je moje přednost pro jakýkoli efekt scrolling-animation. Je to vždycky krásná technika, ale načasování musí být rychlé a na místě. Nikdo nechce čekat, až se objeví obsah a Hike to jasně rozumí.
8. Project Fi
Pokud je někdo, kdo zná skvělou UX, je to Google. A ve všech svých produktech mají tunu vstupních stránek, Projekt Fi být jedním příkladem s fantastickými animacemi.
Ty se vztahují pouze na ikony a nezmění se, ale spíše se objeví od dolů na stránce. Během posouvání najdete ikony, které se posouvají do zobrazení pro každou malou část.
Je to docela jemný efekt, ale přidává do designu nějaký život. A je založen výlučně na pozici diváka na stránce, takže pokud se posunete nahoru a přesunete dolů, budete přivítáni stejnými animačními efekty.
9. Základna
The Hlavní stránka CRM je vynikajícím příkladem jednoduché animace v práci. Tato stránka používá vlastní efekty animace pro přesun obrázků nahoru a do očí řádu prohlížeče.
Na základě počtu vstupních stránek, které denně vidím, je to typické, co očekávám. Není to opravdu složitá animace, která se bude znovu vytvářet, ani to příliš neovlivní.
Jedna věc, kterou bych si přál, je, aby se animace načítaly trochu rychleji. Ale kromě toho si myslím, že je to skvělý příklad animace obrázků na rolovacím stroji s velmi čistým rozložením, které se má spustit.
10. AnyList
Všechny nejlepší mobilní aplikace mají své vlastní webové stránky pro propagaci. A ty nejlepší mají zpravidla nějaké hezké animační styly.
AnyList kombinuje několik různých technik dohromady na jedné stránce. Jejich záhlaví se zvedne pod okrajovou oblastí, ale je to jediná "pohyblivá" animace na stránce.
Vše ostatní prostě zmizí a to všechno využívá velmi rychlou dobu načítání pro animaci. Tyto techniky se používají jinde na místě, což jim dává kreativnější pocit.
11. Ernest
Styl stránky pro Ernest je trochu jiná než jiné vstupní stránky, které jsem pokryl.
Používá to paralaxa rolování animace vytvořit pohyb na rozvržení jedné stránky s různými sekcemi.
Ty se liší podle směru, kterým posouváte, zda se pohybujete nahoru nebo dolů a jakou rychlostí. Rovněž se liší podle intenzity založené na různých částech stránky.
Můžete navigovat pomocí navigační nabídky s bočními tečkami a rychle přeskočit stránku do různých oblastí. Jedná se o jednu z mála technik, které často uvidíte na stránkách paralaxa a určitě pomáhá Ernestovi vyčnívat z davu.
12. TaxiNet
Chcete-li zahlédnout animace v celé stránce, podívejte se na TaxiNet webová stránka.
Jedná se o smorgasbord scroll-založené animační efekty svázané s ikonami, textem, obrázky a dokonce i styly pozadí. Jednotlivé barvy pozadí stránky se animují s uživatelem, rozhodně není typickou technikou, ale rozhodně zajímavou.
Pokud se vám tento styl líbí, můžete zcela aplikovat podobný přístup na vlastní vstupní stránku. Jen se ujistěte, že animace jsou elegantní a rychlé, protože nikdo nechce čekat na to, aby se načtené vaše animované animace.
Ale pokud je uděláte správně, tyto elementy posouvání do zobrazení přidávají příjemný efekt jakékoli vstupní stránce.
