Zadejte hledaný výraz...

Animace na webu – hledám návod

StepanP
verified
rating uzivatele
(12 hodnocení)
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
verified
rating uzivatele
(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
verified
rating uzivatele
(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ý
verified
rating uzivatele
(37 hodnocení)
10. 7. 2018 20:23:57
Zde napríklad. Pre vlastný efekt bude treba vždy niečo doplniť a prikombinovať vlastnou znalosťou, žiadny návod neodpovedá 100%.
Animate elements when scrolled into view with native JavaScript | Edd Yerburgh
10. 7. 2018 20:23:57
https://webtrh.cz/diskuse/animace-na-webu-hledam-navod/#reply1355816
Alex_H
verified
rating uzivatele
11. 7. 2018 09:57:10
Nebude to slovíčko "parallax" ?
11. 7. 2018 09:57:10
https://webtrh.cz/diskuse/animace-na-webu-hledam-navod/#reply1355815
StepanP
verified
rating uzivatele
(12 hodnocení)
11. 7. 2018 11:21:40
Děkuji všem za pomoc. Našel jsem plugin http://scrollmagic.io/, ten mi prozatím postačí. :)
11. 7. 2018 11:21:40
https://webtrh.cz/diskuse/animace-na-webu-hledam-navod/#reply1355814
Pro odpověď se přihlašte.
Přihlásit