Animation starten per Mouse Roll-over

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

    Code
    1. startAnimation: function () {
    2. s = this.settings;
    3. s.startButton.click(function() {
    4. $("div.target").toggleClass("animate");
    5. if (s.startButton.attr("value") === "ANIMATE THE SCENE") {
    6. s.startButton.attr("value", "RESET THE ANIMATION");
    7. } else {
    8. s.startButton.attr("value", "ANIMATE THE SCENE");
    9. }
    10. });


    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

  • 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?

  • 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

  • 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.

  • 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
    1. <audio controls autoplay>
    2. <source src="horse.ogg" type="audio/ogg">
    3. <source src="horse.mp3" type="audio/mpeg">
    4. Your browser does not support the audio element.
    5. </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