Ergebnis 1 bis 7 von 7

Thema: Animation starten per Mouse Roll-over

  1. #1
    Youngster
    Registriert seit
    14.02.2013
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Animation starten per Mouse Roll-over

    Guten Abend,

    weiss jemand, wie man diese Animation: http://www.impressivewebs.com/demo-f...nimated-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
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Youngster
    Themenstarter

    Registriert seit
    14.02.2013
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation starten per Mouse Roll-over

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

  3. #3
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation starten per Mouse Roll-over

    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
    Maybe this world is another planet's hell

  4. #4
    Youngster
    Themenstarter

    Registriert seit
    14.02.2013
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation starten per Mouse Roll-over

    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?

  5. #5
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation starten per Mouse Roll-over

    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
    Maybe this world is another planet's hell

  6. #6
    Youngster
    Themenstarter

    Registriert seit
    14.02.2013
    Beiträge
    13
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation starten per Mouse Roll-over

    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.

  7. #7
    Kaiser(in)
    Registriert seit
    26.07.2004
    Ort
    Server 2 von 3
    Alter
    27
    Beiträge
    2.512
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Animation starten per Mouse Roll-over

    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-Code:
    <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
    Maybe this world is another planet's hell

Ähnliche Themen

  1. IE - FF :roll:
    Von xXx_BaSStar_xXx im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 12.03.2007, 19:30
  2. Mouse-Over
    Von genXter im Forum Flash Forum
    Antworten: 4
    Letzter Beitrag: 28.03.2006, 20:54
  3. Sound file bei Roll over bild
    Von rocketfox im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 11.08.2005, 00:21
  4. Rock' n Roll
    Von gelöschter User im Forum Off Topic und Quasselbox
    Antworten: 2
    Letzter Beitrag: 10.06.2005, 17:14
  5. EINFACHES MOUSE-OVER...
    Von HoLo im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 16.09.2004, 21:08

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •