mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Fr 29.03.2024 06:31 Benutzername: Passwort: Auto-Login

Thema: CSS Animation mit "transition" - Ereignis auslösen vom 11.12.2010


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> CSS Animation mit "transition" - Ereignis auslösen
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

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Kash

Dabei seit: 07.11.2002
Ort: Schopfheim
Alter: 41
Geschlecht: Männlich
Verfasst Mo 13.12.2010 10:02
Titel

Antworten mit Zitat Zum Seitenanfang

Guck mal hier rein

http://www.mediengestalter.info/forum/22/tut-css3-techniken-transform-transition-animate-141718-1.html

Evtl hilft Dir das.
  View user's profile Private Nachricht senden
Anzeige
Anzeige
Smooth-Graphics

Dabei seit: 22.05.2006
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 13.12.2010 10:20
Titel

Antworten mit Zitat Zum Seitenanfang

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/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
emorikaner

Dabei seit: 23.06.2009
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 13.12.2010 10:48
Titel

Antworten mit Zitat Zum Seitenanfang

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
  View user's profile Private Nachricht senden
Chris_123
Threadersteller

Dabei seit: 11.12.2010
Ort: -
Alter: -
Geschlecht: -
Verfasst Di 14.12.2010 02:58
Titel

Antworten mit Zitat Zum Seitenanfang

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>
  View user's profile Private Nachricht senden
 
Ä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
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.