Sponsored Links |
|
||||
Ich weiß nicht was waypoint ist, aber i.d.R. haben Animationsfunktion in jQuery Callbackfunktionen, die aufgerufen werden, wenn die Animation beendet ist. Hast du mal in der Doku nach so einer Funktion geschaut?
|
Sponsored Links |
|
||||
Hallo,
mit waypoints kann ich sehr einfach bestimmen, wann ein Effekt einsetzt (in Abhängigkeit seiner Position im Viewport). Bei Interesse: Waypoints In meinem Fall soll dem "p.animated" die Klasse "fadeInUp" hinzugefügt werden, wenn das übergeordnete <div id="test"> komplett im Viewport ist. Gruß mimii Geändert von mimii (27.07.2015 um 13:47 Uhr) |
|
||||
Ach gerade schnall ich, dass du gar keine jQuery Animationen benutzt.
Das ist etwas anderes. Da weiss ich nicht, ob das was du willst geht. Da du ja die Klasse aller Elemente änderst, klappt das auch nicht mit dem Code, den du uns gezeigt hast. |
|
||||
Hallo,
danke erst Mal für deine Hilfe. Der Code mit dem waypoint und der addclass funktioniert. Aber es werden halt alle drei Absätze auf einmal eingeblendet. Daher war meine Idee, dass die Klasse "fadeInUp" für jeden einzelnen Absatz erst nach einer gewissen Verzögerung eingefügt wird. Das soll nach meinen Recherchen eben mit dem settimeout möglich sein. Nur weiß ich nicht wie ich das korrekt einbauen muss. Ich habe es so probiert, aber das funktioniert nicht. Die Klasse "fadeUpIn" wird erst gar nicht mehr reingeschrieben. Code:
$(document).ready(function(){ $("#test").waypoint(function() { setTimeout(function(){ $("p.animated").addClass("fadeInUp"); }, 500 * i); }, {offset: 'bottom-in-view'}); }); mimii Geändert von mimii (27.07.2015 um 14:17 Uhr) |
|
||||
Naja, dazu kmüsstest du zuerst die Absätze einzeln ansprechen und dann den gezeigten Code benutzen. Aber nicht mit this, sondern mit dem entsprechenden Element.
Das ganze geht aber doch sauberer mit events, hier habe ich mal kurz gesucht und gefunden How to Capture CSS3 Animation Events in JavaScript du musst also jedes Element einzeln ansprechen, dann einen Event setzen, der bei 'animationend' dem nächsten Element die Klasse zuweist und so weiter. |
|
||||
Als kleine Fingerübung:
Code:
<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> #anim p.enable { -webkit-animation: flash 1s ease 3; -moz-animation: flash 1s ease 3; -ms-animation: flash 1s ease 3; -o-animation: flash 1s ease 3; animation: flash 1s ease 3; } @keyframes flash { 50% { opacity: 0; } } </style> </head> <body> <div id="anim"> <p>Absatz 1</p> <p>Absatz 2</p> <p>Absatz 3</p> </div> <script> var qwery = function(S, P){return [].slice.call((P||document).querySelectorAll(S))}; anim(qwery('#anim p ')); function anim(el){ if(!el.length) return; var first = el.shift(); first.addEventListener('animationend', function() {anim(el); }, false); first.className = 'enable' } </script> </body> </html> Geändert von protonenbeschleuniger (27.07.2015 um 14:43 Uhr) |
|
||||
Vielen Dank für deine Bemühungen,
die Animation krieg ich ja durch das "animate.css". Hier ist das mit den keyframes und der Animationsdauer alles geregelt. Damit animate.css startet wird zum einen die Klasse "animated" benötigt. Die steht ja schon im <p> drin, zum anderen eben die Klasse "fadeInUp" und genau diese muss eben zeitverzögert nacheinander zusätzlich ins <p> rein. Bei Interesse:https://daneden.github.io/animate.css/ Ich habe mal n fiddle gebaut: http://jsfiddle.net/mimii/xj9hg6fa/26/ Wenn man scrollt und der Bottom vom <div id="test"> sichtbar ist, startet die Animation. Viele Grüße mimii Geändert von mimii (27.07.2015 um 18:53 Uhr) |
Sponsored Links |
Themen-Optionen | |
Ansicht | |
|
|
Ähnliche Themen | ||||
Thema | Autor | Forum | Antworten | Letzter Beitrag |
Hilfe gesucht beim erstellen meiner Startseite..... | eBase2009 | CSS | 17 | 25.06.2009 23:07 |
[Fehler] setTimeout innerhalb einer Klasse | Lord-Sfx | Javascript & Ajax | 2 | 08.04.2009 01:37 |
Kontaktformular Hilfe nötig :) | sunny55 | CSS | 2 | 05.08.2008 20:29 |
HILFE, ich brauche Hilfe von Profis! | frambuesa | CSS | 13 | 13.06.2008 23:46 |
Bitte um Hilfe bei CSS-Einbindung | Anfänger | CSS | 13 | 08.08.2007 21:37 |