Zurück   PSD-Tutorials.de > Webbereich > (X)HTML & CSS


Antwort
 
Themen-Optionen
Alt 19.06.2012, 22:19   #1 Nach oben scrollen
Helper
MemberMember
 
Benutzerbild von C_Motion_Graphics
 

Registriert seit: 14.01.2011
Ort: Hamburg
Beiträge: 110
Kamera: JVC GY-HD100 (HDV)
Verwendet: Adobe Creative Suite Production Premium CS5.5, Avid Media Composer, Maya, Sublime Text 2

Hover-Animation


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
__________________
Wenn du auf das große Wunder wartest, verpasst du viele Kleine.
Unbekannt
vimeo.com/christiangaertner

Geändert von C_Motion_Graphics (19.06.2012 um 22:22 Uhr).
  Mit Zitat antworten


Alt 20.06.2012, 00:30   #2 Nach oben scrollen
2-Sterne-Helfer
HelperHelper
 
Benutzerbild von Pixelkarton
 

Registriert seit: 05.07.2009
Ort: Dresden
Beiträge: 746
Kamera: Sony Alpha α33, Nikon D3100
Verwendet: CS6, 3DSMax 2013, Bleistift+Papier

Welche Button meinst du? Ich sehe nur normale.

Ich tippe aber auf Javascript.
__________________
500px
Blog // www.pixelkarton.de
Danke an alle, die mir bei meinen Projekten Helfen
  Mit Zitat antworten
Alt 20.06.2012, 00:45   #3 Nach oben scrollen
Medienjongleur
Premium-SupporterPremium-SupporterPremium-SupporterPremium-SupporterPremium-Supporter
 
Benutzerbild von patrick_l
 

Registriert seit: 11.05.2008
Ort: NRW
Beiträge: 5.849
Kamera: Canon Eos 7D, Eos 60D, MV900, Revue
Verwendet: CS4/CS6, Corel, GIMP, Coda, SublimeText 2, Wacom [...]

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
  Mit Zitat antworten
Alt 20.06.2012, 07:51   #4 Nach oben scrollen
Helper
MemberMember
Themenstarter
 
Benutzerbild von C_Motion_Graphics
 

Registriert seit: 14.01.2011
Ort: Hamburg
Beiträge: 110
Kamera: JVC GY-HD100 (HDV)
Verwendet: Adobe Creative Suite Production Premium CS5.5, Avid Media Composer, Maya, Sublime Text 2

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?
__________________
Wenn du auf das große Wunder wartest, verpasst du viele Kleine.
Unbekannt
vimeo.com/christiangaertner

Geändert von C_Motion_Graphics (20.06.2012 um 08:18 Uhr).
  Mit Zitat antworten
Alt 20.06.2012, 10:30   #5 Nach oben scrollen
Powerposter
PowerposterPowerposterPowerposter
 

Registriert seit: 01.11.2007
Ort: Ö
Beiträge: 1.258

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.
  Mit Zitat antworten
Alt 20.06.2012, 11:06   #6 Nach oben scrollen
2-Sterne-Helfer
HelperHelper
 
Benutzerbild von Pixelkarton
 

Registriert seit: 05.07.2009
Ort: Dresden
Beiträge: 746
Kamera: Sony Alpha α33, Nikon D3100
Verwendet: CS6, 3DSMax 2013, Bleistift+Papier

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
__________________
500px
Blog // www.pixelkarton.de
Danke an alle, die mir bei meinen Projekten Helfen
  Mit Zitat antworten
Alt 20.06.2012, 11:35   #7 Nach oben scrollen
Helper
MemberMember
Themenstarter
 
Benutzerbild von C_Motion_Graphics
 

Registriert seit: 14.01.2011
Ort: Hamburg
Beiträge: 110
Kamera: JVC GY-HD100 (HDV)
Verwendet: Adobe Creative Suite Production Premium CS5.5, Avid Media Composer, Maya, Sublime Text 2

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!
__________________
Wenn du auf das große Wunder wartest, verpasst du viele Kleine.
Unbekannt
vimeo.com/christiangaertner
  Mit Zitat antworten
Alt 23.06.2012, 20:44   #8 Nach oben scrollen
Newbie
Newbie
 

Registriert seit: 23.06.2012
Ort: Leipzig
Beiträge: 2
Verwendet: Adobe Illustrator, QuarkXPress...

wenn du fertig bistt kannst du ja mal den link zu deiner website schicken
  Mit Zitat antworten
Alt 23.06.2012, 22:17   #9 Nach oben scrollen
Helper
MemberMember
Themenstarter
 
Benutzerbild von C_Motion_Graphics
 

Registriert seit: 14.01.2011
Ort: Hamburg
Beiträge: 110
Kamera: JVC GY-HD100 (HDV)
Verwendet: Adobe Creative Suite Production Premium CS5.5, Avid Media Composer, Maya, Sublime Text 2

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...
__________________
Wenn du auf das große Wunder wartest, verpasst du viele Kleine.
Unbekannt
vimeo.com/christiangaertner
  Mit Zitat antworten
Antwort


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 
Themen-Optionen


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
Frage - jQuery Animation DIV bei Hover verschieben Kilomoana PHP und andere Scriptsprachen 3 15.04.2012 13:43
IE7 - Hover-Menü klappt bei hover sofort wieder zu dernorb (X)HTML & CSS 0 16.01.2010 18:34
ie6 / hover / css mfwenzel (X)HTML & CSS 17 27.11.2009 14:51
<ul><li> hover ! puur Allgemeines 3 27.09.2008 02:05
Box hover? xero7 (X)HTML & CSS 1 20.11.2006 15:57