Animace na webu – hledám návod

10. 7. 2018 18:28:37

Ahoj,

už na několika webech jsem viděl animaci, která mě zaujala a rád bych se ji naučil nebo bych se o ni alespoň něco dozvěděl.

Hledám nejlépe nějaký tutoriál na YT, nebo písemný návod. A nebo poprosím alespoň o klíčová slova. Bohužel, ať hledám jak hledám, nemohu ničeho dohledat a už jsem nad tím strávil několik hodin.

V současné době ovládám HTML, CSS a nyní se učím jQuery, takže poprosím o vstřícnost, jedná-li se o nějakou banalitu v JS. :)

Daná animaci se nachází např. na následujícím webu, hned v úvodní sekci. Při potočení kolečkem na myši se obrázky na stranách se posunují po ose X do ústraní a současně mizí - postupuje do opacity:0.

Např. zde: https://konferenceglorious.cz/

Na jiných webech se například objevují tímto stylem sekce zespodu stránky po ose Y a jdou do opacity:1.

Předem díky.

Štěpán

10. 7. 2018 18:28:37

https://webtrh.cz/diskuse/animace-na-webu-hledam-navod#reply1355819

michal731

(69 hodnocení)

10. 7. 2018 18:55:25

Nejjednodušší budeš mít asi přímo knihovnu. Třeba https://daneden.github.io/animate.css/

Ze zdroje už si vyčteš jednotlivé animace a můžeš si je případně upravit.

Pak nějaký tutorial třeba https://www.w3schools.com/css/css3_animations.asp

10. 7. 2018 18:55:25

https://webtrh.cz/diskuse/animace-na-webu-hledam-navod#reply1355818

StepanP

(12 hodnocení)

10. 7. 2018 20:10:54

Napsal michal731;1473756
Nejjednodušší budeš mít asi přímo knihovnu. Třeba https://daneden.github.io/animate.css/
Ze zdroje už si vyčteš jednotlivé animace a můžeš si je případně upravit.
Pak nějaký tutorial třeba https://www.w3schools.com/css/css3_animations.asp

Diky za radu, nicmene klasicke CSS animace samozrejme znam. Mne jde vsak o takovou animaci, mozna je to spise pozicovani, kdy se pri scrollu koleckem dolu, treba jen o jeden zoubek, se element posune napr o 50px doleva, jakmile scrollnes o dalsi zoubek, tak se posune o dalsich 50px doleva a tak dokola, nez nezmizi.

10. 7. 2018 20:10:54

https://webtrh.cz/diskuse/animace-na-webu-hledam-navod#reply1355817

Jozef Kotrý