Zadejte hledaný výraz...
Jakub Glos
Webtrh.cz
Vývoj webových stránek na WordPressu a proklientský přístup pro freelancery
Třídenní infromacemi nabitý prezenční + online kurz v Praze od Webtrhu pouze za 2 871 Kč
Více informací

Animace – vystoupeni

Taps
verified
rating uzivatele
(118 hodnocení)
22. 12. 2017 15:24:53
zdravim, mam vedle sebe 3 tlacitka a potrebuji aby po kliknuti na ne se zobrazil div, ktery pomoci animace jak kdyby vystoupi z toho tlacitka...muzete mi prosim nekdo poradit? samotne zobrazeni jiz mam ale nevim jak to zanimovat. dekuji
22. 12. 2017 15:24:53
https://webtrh.cz/diskuse/animace-vystoupeni/#reply1319007
michal731
verified
rating uzivatele
(69 hodnocení)
22. 12. 2017 15:35:29
Já bych mu dal z-index -1 a po kliknutí 999. Width a height : 0px a pokliknutí dané míry. Vše udělat animací přes css nebo procesory jestli víš kam tím mířím. Klidně bych si to zvětšení dal na class a tu mu po kliknutí přiřadil. Možností zde bude více.
22. 12. 2017 15:35:29
https://webtrh.cz/diskuse/animace-vystoupeni/#reply1319006
Taps
verified
rating uzivatele
(118 hodnocení)
22. 12. 2017 16:48:07
diky, nebyla by i nejaka ukazka? css3 moc neovladam
22. 12. 2017 16:48:07
https://webtrh.cz/diskuse/animace-vystoupeni/#reply1319005
Vytvořil jsem Vám ukázku namíru: https://codepen.io/anon/pen/dJpLaK
1. cervene tlacitko: v jQuery použito "mouseenter" a "mouseleave", když najedete na tlačítko, začne se objevovat div, můžete si vyzkoušet přepsat (v jQuery) "show1" na "show2", kdy je div větší. SHOW1 je klasické prolnutí, SHOW2 je prolnutí se zvětšením rozměrů. V CSS vytvoří toto kouzlo "transition: 3s"
2. zelene tlacitko: v jQuery použito "click", když kliknete na tlačítko, tak naroste z malého skrytého divu jeden velký (představte si, že za zeleným tlačítkem vidíte malý div, který naroste). Když kliknete na narostlý div, zavolá se znova funkce jQuery a div bude skryt.
Jak to v CSS funguje? (uvedu na příkladu červeného tlačítka):
1) Myš je mimo tlačítko, náš skrytý div má "opacity: 0;" a "z-index: -1;"
2) Myší jsme najeli, nastaví se "opacity: 1;" a "z-index: 999"
3) Použili jsme "transition-duration: 3s;", to znamená, že se nenastaví opacity hned, ale dojde do svého maxima až po 3 vteřinách, nebo-li zAnimuje.
Nejsem žádný kóderský guru a je možné, že je něco v syntaxi špatně, nicméně to funguje a jsem za to rád :)
22. 12. 2017 22:03:08
https://webtrh.cz/diskuse/animace-vystoupeni/#reply1319004
smrtka
verified
rating uzivatele
(3 hodnocení)
22. 12. 2017 22:31:11
To druhe bych teda radsi udelal pomoci zoomu, ptz takhle se meni radkovani toho textu uvnitr
22. 12. 2017 22:31:11
https://webtrh.cz/diskuse/animace-vystoupeni/#reply1319003
Pro odpověď se přihlašte.
Přihlásit