![]() |
|
|
Themen-Optionen |
|
|
#1
|
|
Helper
![]() ![]() 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-AnimationHallo,
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). |
|
|
|
#2
|
|
2-Sterne-Helfer
![]() ![]() Registriert seit: 05.07.2009
Ort: Dresden
Beiträge: 746
Kamera: Sony Alpha α33, Nikon D3100Verwendet: 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 |
|
|
|
#3
|
|
Medienjongleur
![]() ![]() ![]() ![]() ![]() Registriert seit: 11.05.2008
Ort: NRW
Beiträge: 5.849
Kamera: Canon Eos 7D, Eos 60D, MV900, RevueVerwendet: 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 |
|
|
|
#4
|
|
Helper
![]() ![]() Themenstarter
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). |
|
|
|
#5
|
|
Powerposter
![]() ![]() ![]() 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. |
|
|
|
#6
|
|
2-Sterne-Helfer
![]() ![]() Registriert seit: 05.07.2009
Ort: Dresden
Beiträge: 746
Kamera: Sony Alpha α33, Nikon D3100Verwendet: 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 |
|
|
|
#7
|
|
Helper
![]() ![]() Themenstarter
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 |
|
|
|
#8
|
|
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
|
|
|
|
#9
|
|
Helper
![]() ![]() Themenstarter
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 |
|
![]() |
| 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 |
-
Reklame
-
-
- Auswahl mit transparentem Hintergrund abspeichern
- Kameraentscheidung
- Guten Abend zusammen...
- Steam Worskop
- Photoshop speichert nicht weiter
- Und wieder Bildlook. Oder:"Wie hat er das gemacht?"
- Animationszeitfenster ohne loop
- Schrift am Pfad ausrichten - Problem! Stopp am Knotenpunkt?
- Backen beim Sculpten funktioniert nicht
- 3D mit dem OpenSimulator
- DB Fehler bei Umzug auf Server
- Mappen eines halb-runden Zylinders
- Frage: Partieller UV-Lack ... Text ohne Lack einbinden
- Text im kreis schreiben in andere Richtung
- schöner Rand für Bewerbungsfoto
- Webinar mit Adibe Photoshop
- Freistellen in einem SW-Halbton-Bild
- Suche Tutotial/Guideline: Sturm aus "Big trouble aus little China"/Raiden MK
- PSD und JPG dateien wiederherstellen
- Das große Texturenpaket von PSD
-
-
Aktuelles Commag
Anzeige
-
Anzeige










Social Media