Autor Zpráva
tpmar
Profil
Zdravím,
mám takovou ideu, kterou chci už pár dnů realizovat. Už nad tím sedím pár hodin a vůbec nevím, jak dál. Potřeboval bych popostrčit od zkušenějších :-)

Jedná se o animace hned na úvodní stránce. Budou tam 3 odrážky s puntíky a ke každému puntíku potřebuji udělat animaci, že z něj vyjede nejdřív kolmá čára dolů a následně horizontální čára doprava. Vytvoří něco jako ,,|________". Zkoušel jsem se kvůli tomu naučit i práci s SVGéčkem ale nakonec jsem zjistil, že to nepodporuje ani novější IE 11.

Musí to splňovat tyto podmínky:
1. Animace půjdou postupně. Nejdříve z prvního puntíku, po pár sekundách zmizne a vyjede z druhého.
2. Musí to být dynamické, tzn. když uživatel přejede na text s jiným puntíkem, musí okamžitě vyjet animace u toho puntíku.

Poradí mi někdo? Budu vděčný za každou radu. :-)
Fisir
Profil
Reaguji na tpmara:
Zkusil jsem vytvořit něco pro inspiraci. Musel by sis ale dodělat automatické spouštění animací, upravit jejich styl (svislá čára asi dělá něco jiného, než jsi chtěl) a opravit neodstranění elementu se svislou čarou při odjezdu myši z puntíku dříve, než se přianimuje.
Martin2
Profil *
tpmar:
Je pravda, že SVG animace jsou stále trochu exotika. Vinou pochopitelně stále stejného prohlížeče, ať už se jmenuje jakkoliv.

Zkusil bych CSS animace. S trochou péče bys mohl zvládnout vytvořit stejný efekt s celkem slušnou podporou.
tpmar
Profil
Fisir:
Tak nějak jsem to myslel ještě trochu jinak. Mělo by to být spojité, jakoby to bylo ve stylu border-left a right ale musí se to umět animovat. Jestli rozumíš.

Martin2:
Zajimavé, že se pořád nechcou polepšit a neupraví prohlížeč tak, aby šel s dobou.
To jsem se už taky pokoušel ale taky nevím, jak to udělat. Ledaže bych to nakódoval pomocí height a width ale nebude to plynulé. Stejně mi už nic jiného asi ani nezbývá :-)
juriad
Profil
A co třeba čistě jen v CSS?
Živá ukázka
tpmar
Profil
juriad:
Dííky!! :-) Takhle jsem si to plánoval původně ale asi jsem udělal kdesi chybu a nefungovalo to, jak mělo. Tak jsem ten nápad zahodil a šel jsem raději na složitější řešení. :-D

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: