jQuery - nach Viewport Klassen einfügen

[rantanplan2000]

Hallo,
kurz zu meinem Vorhaben:

Ich möchte, einige Container beim scrollen animieren. Also wenn das jeweilige Element am unteren Bildschirmrand auftaucht, dass eine Klasse hinzugefügt wird.

• Die Klasse soll pro Seitenaufruf jedoch nur einmal hinzugefügrt werden. Also nicht dass man beim hoch und runterscrollen, immer den animationseffekt hat. Nur einmal eben.
  
• Das ganze soll erst ab einem Viewport von ~450px passieren
• Wenn man die Seite aktuallisiert, sollen die Elemente, die im Viewport sind, ebenfalls die animaltion bzw. Klasse bekommen. Sonst müsste man ja immer scrollen, wenn man z.b. einen fade effekt macht und die elemente im Normalzustand ausgeblendet sind.

Folgende Vorarbeit habe ich:

jQuery(document).ready(function() {
 
    var navOffset = jQuery(".mein-element").offset().top; // prüfe scroll position von nav
    
jQuery(window).scroll(function(){

     var scrollPos = jQuery(window).scrollTop();
     var windowWidth = $(window).width();
    
// Ab ...px  Display und größer 
//    if(windowWidth >768) {
            
   if (scrollPos >= navOffset) { 
   if (scrollPos >= 460) {
   jQuery(".mein-element").addClass("visible");
    
    } else {
    jQuery(".mein-element").removeClass("visible");
    } 
}
    
});   
});

und CSS:

.mein-element {
  opacity: 0;
  transition: all 800ms ease-in-out;
   transform: translateY(-100%);
}

.mein-element.visible {
  transform:translateY(0);
  opacity: 1;
}

So ... folgende Probleme bleiben also:

Die Klasse änder aktuell wenn das Element am oberen Rand ist, nicht unten. offset().bottom; geht nicht.
Es fügt die Klasse auch nicht zu, wenn das Element z.b. im Viewport ist, und man die Seite aktuallisiert.

Würde mich über Hilfe freuen, kann in Form von Code sein, oder ein Tutorial für genau den Fall. Danke.

 

[rantanplan2000]

Habe ein passendes Tutorial gefunden: http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/ danke