Hover-Animation

[C_Motion_Graphics]

Hallo,

ich bin gerade dabei eine Website zu designen und wollte bei den Buttons Hover-Animation anwenden. Ich weiß, dass sich der Button ändern kann, aber dann nur mit Standard-Bild und Hover-Bild, d. h. wie bei einer Lampe: AN-AUS! Nun habe ich bei folgender Website (videocopilot.net) Buttons gesehen, wo unten so ein "Licht" langsam "an" geht, dass heißt, hier wurde einfach geblendet. Wie kann ich das mit CSS/JavaScript machen (ich habe html/php/css/java Kenntnisse!!!)? Mir steht zur Verfügung: Adobe Creative Suite Production Premium CS5.5 und Dreamwaver und Fireworks CS6!
Vielen Dank!
Christian

 

[Pixelkarton]

AW: Hover-Animation

Welche Button meinst du? Ich sehe nur normale.

Ich tippe aber auf Javascript.

 

[patrick_l]

AW: Hover-Animation

Animationen können mittlerweile wunderbar mit CSS3 umgesetzt werden. Hier muss man nur berücksichtigen das ältere Browser damit nichts anfangen können. Hier wie so oft hauptsächlich der IE.

Wenn es in allen Browsern laufen bzw. in allen Browsern zu sehen sein soll, dann mit JS arbeiten. Hier wird dann natürlich aktiviertes JS vorausgesetzt. Was in der Regel ja eigentlich der Fall ist.

Grüße Patrick

 

[C_Motion_Graphics]

AW: Hover-Animation

Ok vielen Dank für die Antworten. @Pixelkarton ich meinte die blauen Buttons oben.
Ich nehme dann doch aber lieber JS ist mir sympatischer! Und dann einfach diese Java-Objekt als Hyperlink "aktivieren", oder?

EDIT: Könnte ich hierfür dieses Script verwenden: http://isthatclear.com/jquery/bgFade/

Eigentlich müsste das doch funktionieren oder?

 

[Myhar]

AW: Hover-Animation

Es ist mit JS möglich, aber es ist "falsch", diese Funtkionalität mit JS umzusetzen. Dafür ist, wie die Vorredner schon korrekt sagten, CSS3 geeignet. In Browsern ohne CSS3 Unterstützung (zB IE) wird dann zwar keine Animation angezeigt, jedoch ist das hoffentlich vernachlässigbar. Die Funktionalität ist ja weiterhin gegeben.

Bei einer JS Lösung musst du auch berücksichtigen was passiert, wenn ein User kein JS aktiviert hat.
Und: Java ist etwas komplett anderes als Javascript.

 

[Pixelkarton]

AW: Hover-Animation

Ich habe mich damit erst beschäftigt und habe diese Website gefunden, die das ganz gut umsetzt:

http://mdubiel.de/

schau dir den HTML- und CSS Code an, dann wirst du fündig.

PS: Ich habs mit Chrome und Firefox (beides aktuelle Versionen) probiert, die Bottun sind entweder blau oder leuchtend blau, aber nichts dazwischen :lol:

 

[C_Motion_Graphics]

AW: Hover-Animation

Das Java was anders als JavaScript ist weiß ich... Habe es halt nur gekürzt...
Ok danke! Wenn die Animation nicht im Internet Explorer zu sehen ist... Sche** drauf! Ich werde es dann mal mit CSS3 machen!
@Pixelkarton vielen Dank für diesen Link! Im Quellcode konnte ich schon mal ein bisschen was erkennen! Danke!
Ich werde es jetzt mal versuchen und wenn ich auf (für mich unlösbare) Probleme stoßen sollte, frag ich einfach nochmal!

 

[grafikmull7]

AW: Hover-Animation

wenn du fertig bistt kannst du ja mal den link zu deiner website schicken

 

[C_Motion_Graphics]

AW: Hover-Animation

Kann ich zwar machen, aber ich habe das Konzept mittlerweile etwas geändert... Das ganze baut jetzt auf ein CMS auf und ich bin mir noch nicht sicher, ob diese Button zum anderen Design passen...