ugrás a tartalomhoz

Logó homályosodásból élesedése

planB777 · 2013. Júl. 25. (Cs), 23.48
Sziasztok.

Hogyan lehetne egy weboldalon szereplő nagy logónak (a fejlécen középen) olyan effektet adni, hogy a kép homályosodásból élesedjen ki úgy, hogy az animáció magától játszódjon le, ne kelljen hozzá, hogy rámenjen az egér?
‹ Facebook like-box elhelyezése jquery change nem fut input property módosításakor ›
 ■
1

Videó

Poetro · 2013. Júl. 26. (P), 00.16
Mondjuk csinálsz egy videót? Animált GIF-et? Leprogramozod canvas-szel?
2

Flash

Hidvégi Gábor · 2013. Júl. 26. (P), 06.55
A Flash-nek az az előnye, hogy könnyű szűrni; nem mindenki szereti az ilyen figyelmet elvonó animációkat.
9

Mobil

Pepita · 2013. Júl. 28. (V), 22.51
És a legtöbb mobil meg nem szereti. OFF: én meg utálom. :)
3

Vagy akár játszhatsz a kép

mahoo · 2013. Júl. 26. (P), 07.01
Vagy akár játszhatsz a kép opacity-jével, ciklikusan.
10

Átlátszó

Pepita · 2013. Júl. 28. (V), 22.52
Az átlátszó != homályos.
4

Megrendelő

janoszen · 2013. Júl. 26. (P), 08.19
Valamiért a megrendelő az ilyesmit mindig iszonyatosan profinak és scifi-szerűnek képzeli el, de a web adottságai miatt (fokozatos betöltés, lassú internet, stb) kivétel nélkül borzasztó gagyi hatást kelt.
5

Egyetértek, érdemes az

bamegakapa · 2013. Júl. 26. (P), 10.18
Egyetértek, érdemes az ilyesmiről lebeszélni.
11

+1

Pepita · 2013. Júl. 28. (V), 22.53
Mondjuk legalább nem villog... :)
6

Webkit-filter

vbence · 2013. Júl. 26. (P), 11.54
A lebeszélés mellett azért álljon itt egy technikai válasz is, ha netán elkerülhetetlen - egyelőre webkit alapú böngészőkben:

http://html5-demos.appspot.com/static/css/filters/index.html

Példa:
http://jsfiddle.net/danielfilho/KxWRA/
7

Egyelőre a támogatottság nem

bamegakapa · 2013. Júl. 26. (P), 12.20
Egyelőre a támogatottság nem az igazi, viszont ha ez nem gond, jó megoldás lehet.

Olvastam valahol SVG animációs lehetőségekről régebben, nem próbálkoztam még vele, de a támogatottsága jobbnak tűnik, érdemes lehet utánanézni. A Flash-nél biztos, hogy jobb ötlet :).
8

Példa

Poetro · 2013. Júl. 26. (P), 12.25
Találtam egy jó működő példát. De ami benne volt az tényleg jó trükk, természetesen az SVG-n kívül.

Veszed a logo képét. És veszel egy másik képet is, amin a logo el van mosodva. Az elmosodott képet a logo fölé helyezed, majd CSS transition-nel, animációval, JS-es animációval egyszerűen teljesen átlátszóvá teszed.
12

Tök jó

Pepita · 2013. Júl. 28. (V), 22.58
Ez nagyon jónak tűnik, még meg lehet lépni vele ugyanazokat a trükköket is kis kijelzőnél, mint a szimpla álló fejléccel.
Egyetlen hátrány: két kép egy helyett. De ez azért felvállalható (okosan).