Animované podtrhávání odkazu*

Giuseppe:
myslím si že je to přes jquery

Na uvedené stránce můžeš na konci vidět dlouhý skript s funkcemi defaultHOver atd. Funguje to tak, že se před odkaz umístí element (posicovaný pod něj), který se při hoveru na odkazu zobrazí a pomocí časovače roztahuje až do šíře toho odkazu.

Osobně bych cíleného efektu docílil vytvořením animovaného GIFu, který by se přehrál při a:hoveru, než vymýšlet výše uvedené šílenosti.

Kterak obrázkem podtrhnout odkaz se dozvíš v Bubákově přehledu.

Jinak je zde jisté risiko, že některý prohlížeč někdy obrázek nepřehraje.

Str4wberry:
„Osobně bych cíleného efektu docílil vytvořením animovaného GIFu“

Takového efektu bys tedy GIFem nedocílil, protože je závislá na šířce každého odkazu, kde je aplikována. Udělal bys sice podobnou animaci, ale nemuselo by to být pro oko tak příjemné.

Pravděpodobně bys taky musel zasahovat JavaScriptem, aby se prováděla i opačná animace (při opuštění odkazu) - spustit animaci na všech odkazech při načtení stránky by asi nebylo moc vhodné ;-)

Těžko říct, jak by to bylo s příjemností, když by se delší odkaz animoval déle. Dalo by se to vyřešit vytvořením různě rychlých animací. Pravda, opačná animace by se musela vyřešit jedním řádkem skriptu.

Reaguji na Giuseppeho:
Daní za efekt na odkázaném webu je, že nemůžou mít řádkové (tedy potenciálně nespojité) odkazy.

Str4wberry:
No a nešlo by, že by standartně byl na tom odkazu na pozadí ten obrázek, kde to podtržení odjede a na hover obrázek kde to podtržení přijede?

Standardně. Šlo by to, pokud by nevadila animace všech odkazů po načtení stránky, jak psal joe.

Str4wberry:
a pokud by byla animace dostatečně široká na šířku, tak by měla též lahodit oku ne? :)

Teď nerozumím. Dostatečná šířka je základ, aby byl GIF universální i pro dlouhé odkazy.

Jinak efekt po načtení je otázka, mohlo by to vypadat i dobře. Tady šlo ale hlavně o to, jak co nejvíce napodobit efekt z odkázaného webu. Možná vytvořím nějakou živou ukázku, abychom to mohli posoudit a i otestovat do jaké míry je to GIFové řešení spolehlivé.

Str4wberry:
Tak GIF by se buď zcvrkl, nebo zvětšil. To druhé by asi způsobilo, že by to poskakovalo trochu no, ale to je přece jasný. :)

Ano, mohl bys to vyzkoušet :P

Velda:
Proč by se měl obrázek zcvrkávat... musí být dostatečně velký.

Str4wberry:
Já bych na to šel přes CSS transitions, takže by snad ani GIF nemusel být potřeba...

A s čím (rozuměj vlastnost) bys chtěl ten CSS přechod dělat?

Není to sice úplně tak, jako na tom webu, ale tamto má taky své nevýhody :-)

Funkční v prohlížeci: Firefox, Chrome a Safari a částečně i Opera

Ve FF to dělá trochu něco jiného u víceřádkového odkazu, v Opeře nefunguje efekt při odjetí z odkazu

http://html.webdream.cz/animovane-podtrzeni-odkazu.html

1) Chabá podpora v prohlížečích.
2) Problém s víceřádkovými odkazy.
3) Nutnost přidávat do každého odkazu prázdný element.

To značně kazí dojem z jinak zajímavého řešení.

Str4wberry:
„1) Chabá podpora v prohlížečích.“
Pro ostatní se to dá řešit JavaScriptem

„2) Problém s víceřádkovými odkazy.“
Problém (snad) jen ve Firefoxu (zase :-))

„3) Nutnost přidávat do každého odkazu prázdný element.“
Prázdný element nic neznamená, proč ne. Asi bys ho měl přidat i v případě použití GIFu, protože odkazy už nějaký obrázek mít mohou.

Tím neříkám, že GIF je špatný... ale je to zbytečné načtení obrázku, kvůli něčemu navíc, co když nepůjde, tak se nic nestane.