[ERLEDIGT] Klasse zu einem Objekt hinzufügen, wenn zu diesem gescrollt wird

[jakestyler]

Hey!
Ich erstelle mal wieder eine One-Page-Seite und würde nun gerne eine Animation (Klasse) von animate.css zu einem Objekt hinzufügen, wenn man zu diesem scrollt.

Ich habe leider garkeine Ahnung, wie man dass anstellt.. (Punkte wie <a id="bla"></a> wurden schon gesetzt)
Ausserdem sollten sich die Animationen wiederhohlen, wenn man hochscrollt und dann wieder runter.

Hier ein Beispiel: http://designmodo.com/flat/ (Einfach mal scrollen)

 

[Tronjer]

Der erste Schritt wäre, eine Scrollfunktion zu bauen. Dafür gibt es in jQuery scrollTop(), und wenn man das mit animate() kombiniert, lässt sich ein easing-Effekt erzielen.

 

[jakestyler]

Ich will eigentlich nur ne Klasse hinzufügen, dass mit ScrollTop verstehe ich nicht, kannst du mr das noch ein bisschen erläutern (Codebeispiel für bestimmte Stelle)? :)

 

[scbawik]

Verstehe nicht ganz was du willst aber denke mal so:

$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if(scrollTop > 1000) $('#elem').addClass('show');
});

 

[jakestyler]

Also, ich hab's immernoch nicht raus!

Folgendes habe ich:

<img src="https://s3.amazonaws.com/bucket/img/support.png" alt="Support" width="396" height="335" class="centering hide" id="support">

Javascript:

$(window).scroll(function () {
    var scrollTop = $(this).scrollTop();
    if(scrollTop > 1000) $('#support').addClass('show animated fadeIn');
});

Aber es tut sich nichts. Wenn ich zu dem Element scrolle, ändert sich nichts.

Nun stehe ich also vor dem Problem, dass sich nichts ändert!

 

[jakestyler]

Hab's hinbekommen, danke #close

 

[scbawik]

Es ist gut möglich dass du statt $(window), $(document) oder $('html, body') verwenden musst.
Irgendeines ist Crossbrowser-kompatibel, nur weiß ich jetzt nicht welches ;)

Edit: Achso, ja dann

 

[jakestyler]

Jetzt habe ich doch noch eine Frage: Wie kann ich den Objekten, wenn ich wieder wegscrolle, die Klassen entfernen?

 

[jakestyler]

Und wie kann ich dass mit mehreren ID's machen?
Ich habe jetzt folgendes Script:

tiles = $("#pre1").fadeTo(0, 0);
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

Wie kann ich jetzt nichtnur #pre1 einblenden wenn dahin gescrollt wird, sondern auch #pre2, wenn zu #pre2 hingescrollt wird. Also der eine Effekt nur bei einem anderem Element...

Bin ein totaler Anfänger in dem Bereich...

 

[jakestyler]

Ah, habs hinbekommen, jetzt steht nur noch

Wie kann ich den Objekten, wenn ich wieder wegscrolle, die Klassen entfernen?

im Raum!

 

[jakestyler]

Hmmmm... Wie gesagt, dass ist der Code:

tiles = $("#pre1").fadeTo(0, 0);
$(window).scroll(function(d,h) {
    tiles.each(function(i) {
        a = $(this).offset().top + $(this).height();
        b = $(window).scrollTop() + $(window).height();
        if (a < b) $(this).fadeTo(500,1);
    });
});

Nun würde ich gerne fadeto durch addClass('animated fadeInLeft'); ersetzten, funktioniert aber leider nicht..