![]() |
|
|
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.892
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.265
|
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
-
-
- Broschüre Erstelle
- gehen euch die Themen aus ?
- noch 81 Stunden bis zum neuen punktefreien Inhalt
- Beleuchtung VRAY
- Aufruf der category-$slug.php über Permalink
- Bei der Bildbearbeitung im Photoshop wird das Billd immer wieder schwarz
- Apache redirect mit .htaccess
- Offline Ordner einlesen
- Dynamisches Logo anhand von URL!?
- Fette Kontur in Pfade umwandeln ?
- exportierte Videos sind zu groß
- Earth & Sky Photo Contest
- Bei falschem Login erfolgt weiterleitung
- Hallo :-)
- Droplets werden nicht ordnungsgemäß abgearbeitet
- Keine Internetverbindung nach PC Start
- CSS content bei Link verschwindet (Opera)
- CHM verliert Inhalt bei Verschieben auf andere Festplatte
- Erfahrungen mit der OfG / Online-Schule für Gestaltung
- Kalender mit Import-Funktion
-
-
Aktuelles Commag
Anzeige
-
Anzeige










Social Media