Animation starten per Mouse Roll-over

Froschgott

Guten Abend,

weiss jemand, wie man diese Animation: http://www.impressivewebs.com/demo-files/css3-animated-scene/
z.B. per Mouse Roll-over starten könnte? Also so, dass sie quasi auch wieder zurückfährt, wenn man mit der Maus vom Bild weggeht?
Wäre super, wenn mir da jemand weiterhelfen könnte

Grüße

Froschgott

Weiss keiner Rat?
Hätte das Beispiel aus dem Link gerne selbststehend zentriert und mit mouse-over abspielbar. Weiss jemand, wie ich das mache?

wernerdeluxe

Das ganze wird mit jQuery gestartet, indem beim Klicken auf einem Button, die animation abgespielt wird.

Code

startAnimation: function () {
s = this.settings;
s.startButton.click(function() {
$("div.target").toggleClass("animate");
if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
s.startButton.attr("value", "RESET THE ANIMATION");
} else {
s.startButton.attr("value", "ANIMATE THE SCENE");
}
});

jetzt könnte man s.startButton.click durch #meineSzene.mouseover ersetzten. (#meineSzene ist nur Beispielhaft) und dann würde das beim mouseover starten.

Wie das ganze beim verlassen wieder rückwärtlaufen soll ... kp. Vll. ein Ansatz:
in der klasse .animate liegen die Animationen drin, die gemacht werden sollen. Man macht jetzt eine Klasse .reanimate der man die entgegengesetzten Animationen zuweist. Da man hier nur Endposition und nicht Startpunkt angibt müsste die "Rückwärtsanimation" von dem Status aus laufen in der Sich die Szene befindet, wenn die Klasse animate durch reanimate ausgetauscht wird.

Nur eine Idee, ich kenn mich selbst noch nicht so gut mit den CSS3 animationen aus.

Gruß
Lukas

Froschgott

Das umzubauen wird mir, als quasi Laie zu viel. Habe es jetzt doch mit dem Button auslösbar gemacht. Aber gäbe es auch die Möglichkeit, einen Song zu starten, sobald man den Button drückt, der ja auch die Animation startet?

wernerdeluxe

Ja ist möglich. Müsstest allerdings den Song vorladen lassen, sonst fängt er je nach Internetverbidung erst später als die Animation an.
Aber ich denke, dass dir das als Laie dann auch zu viel wird.

Wenn du dich trotzdem damit auseinandersetzen willst hier schon mal der Anfang: http://www.w3schools.com/html/html5_audio.asp
Musst dann schauen mit welcher jquery Funktion du das Audioelement starten kannst.

Gruß
Lukas

Froschgott

Das scheint mir etwas zu komplex. Das naheliegendste für mich ist wohl, das Lied direkt beim aufrufen der Seite abspielen zu lassen. Wie könnte ich das machen? Ladezeiten sind kein Problem, da es nur eine ganz einfache Beispielaufgabe ist, die wahrscheinlich eh lokal abgerufen wird und nicht hochgeladen.

wernerdeluxe

Dafür braucsht du auch wieder das audio-tag. Hier der Link, der dir direkt das spezielle Tag zeigt. http://www.w3schools.com/tags/tag_audio.asp

Dein Code denn du dann braucsht sieht dann in etwa wie folgt aus, nur dass du die ogg und mp3 Dateien mit deinem Song austauschen musst.

HTML

<audio controls autoplay>
  <source src="horse.ogg" type="audio/ogg">
  <source src="horse.mp3" type="audio/mpeg">
	  	Your browser does not support the audio element.
	</audio>

Es gibt auch noch veraltete Techniken, aber ich denke, wenn du eine Seite mit CSS3 animationen machst, sollte man auch die HTML5 Elemente verwenden.

Gruß
Lukas

Tags