Autor |
Nachricht |
Chris_123
Threadersteller
Dabei seit: 11.12.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Sa 11.12.2010 13:47
Titel CSS Animation mit "transition" - Ereignis auslösen |
|
|
Hallo,
ich habe eine Frage zum Thema "Animationen mit CSS". Ich bin gerade dabei den Inhalt eines div-Containers mit der Eigenschaft "transition" (transition: background 1s linear;) farblich zu verändern:
Code: | <head>
....
<style type="text/css">
div {
margin: 1.2em 1.2em 1.2em 1.2em;
padding: 20px;
background: #ddd; /* Startfarbe für den Übergang */
font-family: American Typewriter;
text-shadow: black 5px 4px 3px;
letter-spacing:0.1em;
font-size: 130%;
line-height: 2.5em;
transition: background 1s linear;
-webkit-transition: background 1s linear;
-moz-transition: background 1s linear;
-o-transition: background 1s linear;
}
div.changeit {
background: #176CEC; /* Zielfarbe für den Übergang */
}
</style>
</head>
<body>
<div onclick="this.className='changeit'">
Exercidunt wisim iriurem<br>
ad dolobore velisi.<br>
</div>
</body>
</html> |
Der Start der Transformation soll aber nicht durch eine Mausklick ausgelöst werden wie es momentan ist, sondern gleich sobald die Seite vom Browser aufgebaut wird - also ohne weiteres Zutun. Dann müsste doch so etwas wie:
<body onload="xxx"> im body-Bereich stehen - oder?
Gibt es die Möglichkeit das Ereigniss rein mit CSS auszulösen oder brauche ich Javascript dazu?
Vielen Dank im Voraus!
Chris
|
|
|
|
|
Kash
Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht:
|
|
|
|
|
Anzeige
|
|
|
Smooth-Graphics
Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 13.12.2010 10:20
Titel
|
|
|
Das ist meines Wissens nach nur mit Javascript lösbar, da CSS keine Event-Loader mit Referenzierung außerhalb des CSS kennt und du ja zwischen HTML und CSS referenzieren und abfeuern möchtest.
Wenn du jQuery verwendest, ist der Code ziemlich simpel.
http://api.jquery.com/ready/
|
|
|
|
|
emorikaner
Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht:
|
Verfasst Mo 13.12.2010 10:48
Titel
|
|
|
Ich denke mal das dürfte am meisten helfen.
EDIT: Smooth-Graphics hat geschrieben: | Das ist meines Wissens nach nur mit Javascript lösbar | Stimmt so nicht ganz, man weist dem Element (in dem Fall <div>) einen Keyframe zu.
Dort kann man dann mithilfe von (-webkit-)animation-delay sagen, wann das ganze beginnen soll.
Statt onload, also einfach den Delay auf 0 stellen.
Allerdings ist das ganze nicht wirklich ausgereift und wird auch nur von Safari und Chrome unterstützt (oder kann das FF4 inzwischen auch?) und würde ich daher NUR zu Test- & Lernzwecken nutzen.
Zuletzt bearbeitet von emorikaner am Mo 13.12.2010 10:54, insgesamt 1-mal bearbeitet
|
|
|
|
|
Chris_123
Threadersteller
Dabei seit: 11.12.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 14.12.2010 02:58
Titel
|
|
|
Hallo,
erst mal danke für die Antworten, ich sehe schon - wenn ich das Ganze rein mit CSS löse beschränke ich mich zu sehr auf die ganz aktuellen Browser mit halbwegs guter CSS3 Unterstützung.
Deshalb habe ich jetzt doch zu Javascript gegriffen und die scriptaculous-Biblothek eingebunden. Dort gibt es einen ganz guten Effekt der im Prinzip das macht was ich auch möchte, nennt sich "Effect.Morph". Damit lassen sich bestimmte CSS-Eigenschaften beeinflussen unter anderem die "background color". Das funktioniert soweit, allerdings geht es mir zu schnell, die default-Einstellung ist 1sec und ich möchte das varieren bzw. verlängern.
Laut:
http://madrobby.github.com/scriptaculous/effect-morph/
lässt sich das Ganze über "duration" einstellen, ich probiere seit Stunden damit herum aber es klappt nicht.
Javascript ist nicht so mein Thema, hat ein Javascript-Guru eine Idee?
@ Smooth-Graphics
Danke für den Tip mit jquery - das geht sicher auch gut, allerdings habe ich schon mal scriptaculous benutzt und kenne daher das Grundprinzip schon.
Hier der neue Code:
Code: | <head>
....
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js" type="text/javascript"></script>
<style type="text/css">
div {
margin: 1.2em 1.2em 1.2em 1.2em;
padding: 20px;
background: #FFFF99; /* Startfarbe für den Übergang */
font-family: American Typewriter;
text-shadow: black 5px 4px 3px;
letter-spacing:0.1em;
font-size: 130%;
line-height: 2.5em;
}
</style>
</head>
<body onload="$('morph1').morph('background:#00ff00; { duration: 5.0 }'); return false;">
<div id="morph1">
Exercidunt wisim iriurem<br>
ad dolobore velisi.<br>
</div>
</body>
</html> |
|
|
|
|
|
|
|
|
Ähnliche Themen |
URL in Flash auslesen -> Aktion gehe zu Bild X auslösen
CSS-3 TRANSITION im IE
-moz-transition
Div weicher öffnen per Transition
[Javascript] Image Transition / Ein- und Ausblenden?
[TUT] - CSS3 Techniken Transform - Transition - Animate
|
|