Rozhýbej svůj web!

Abych předešel zmatkům: článek se zabývá rozpohybováním webových prvků, dynamičnosti chování. Téma, jak zapojit návštěvníky webu do tvorby obsahu, si nechám někdy na příště.

Rozhýbejte svůj web - střídmě, smysluplně a zábavně.

Starý dobrý hover efekt? Jedině s transition!

Nejjednodušší interakcí je hover efekt, tedy akce při najetí kurzorem nad prvek. Tím jsme právě objevili kolo, hover efektu se využívá od pradávna pro vyznačení možnosti odkazu. Naopak chybějící označení odkazu podtrhnutím, změnou kurzoru při najetí či barvou textou uživateli bude velmi chybět.

Transition je proprieta v CSS3. Umožňuje kodérovi určit délku trvání efektu. Lidé totiž nejsou stroje a nezaregistrují každou milisekundu, a proto je pro ně postupný přechod přirozenější. S trochou kreativity se z čistě informativní funkce stává i silný designový nástroj.

CSS3 knihovny

Pokud nechcete vymýšlet vlastní efekty, nemusíte si zoufat. Na internetu je dostupné velké množství knihoven, které působivé efekty obstarají za vás. Doporučit lze například:

• Hover.css
• Animate.css

Keyframes

Jste-li hraví, pusťte se do sestavení vlastní animace pomocí keyframes. Keyframes vám umožní si naklíčovat vlastní animaci v celém průběhu. 

JavaScriptové knihovny

Když vám přestane CSS3 samo o sobě dostačovat, propracovanějších efektů dosáhnete pomocí JavaScriptových knihoven. Těch je dostupných tolik, že se v nich už člověk ani nedokáže vyznat. Za zmínku jich stojí pár, především těch, které se zabývají i fyzikou v animaci. 

• Velocity.js
• PhysicsJS
• Dynamics.js
• Anime
• ScrollMagic

Všeho s mírou. Pohyblivé prvky nesmí návštěvníka zmást ani rozčarovat.

Na animace s kanónem

JavaScriptové knihovny se zlepšují každým dnem. Snaha získat efektní a efektivní animace na webových stránkách při zachování použitelnosti a nízkého nároku na výkon a objem přenesených dat už nese ovoce.

Tahounem v tomto odvětví je JavaScriptový framework GreenSock Animation Platform. GSAP se zabývá webovými animacemi více než dekádu a za tu dobu si získal renomé a reference i u těch největších světových organizací. Animace jsou výkonnově optimalizované, systém robustní i flexibilní zároveň. My už GSAP doporučujeme klientům pravidelně. Jeho výhody a možnosti jsme si ověřili na mnohých projektech, naposledy na našem kariérnímwebu.cz