Verschieben div horizontal durch vertikalen Bildlauf in einem Bereich

Question

Frage sehr ähnlich ist Move div horizontally when scroll vertically (jquery or CSS3)

ich eine bestimmte Stelle in einer langen Seite habe, dass, wenn der Benutzer es gescrollt hat, mag ich die Seite ein div bewegen aus dem Off (rechts) über den Bildschirm auf die linke Seite.

Im obigen Link verwenden sie Dokumentenhöhe, die mir nicht hilft.

ich habe so weit wie herauszufinden, wann der Umzug mit auszulösen:

if ((win_height+scroll_top) > start_trigger) 
{ 
    // Move calc 
} 

ich die div möchte den Abstand des Bildschirms durch die Zeit reisen sie die Ansicht Port gescrollt haben Höhe.

Der Ausgangspunkt des div ist right: -464px.

Es gibt eine Beziehung zwischen der Fensterbreite (Entfernung zu gehen) und der Fensterhöhe (Zeit zum Einziehen), aber ich kann nicht herausfinden, wie die Startposition des Div gesetzt wird, wenn start_trigger erreicht ist.

start_trigger ist sagen 5000px. Es ändert sich etwas mit der Bildschirmbreite.

Hier ist ein Link: http://tikitour.haricot.co/ Normalerweise ist die "Szene" unter dem "Wählen Sie Ihren Charakter" Schieberegler ausgeblendet, bis Sie durch es gehen, so ändert sich die Höhe.

Scrollen Sie, bis Sie das Feuerwehrauto sehen. Ich hoffe, das hilft.

Ein anderes Beispiel von dem, was ich versuche zu erreichen, ist der "Dieb" auf Ben der Leibwächter: http://benthebodyguard.com/index.php - das konnte ich noch nicht sezieren.

Answer 1

ok. überprüfe hier. machte ein einfaches Beispiel

jsfiddle

Sie brauchen das Element offset().top (Abstand zum oberen Rand des Dokuments) und vergleichen Sie es mit $(window).scrollTop() + $(window).height();

lassen Sie mich wissen zu berechnen, wenn es

JQ hilft code:

$(window).scroll(function() { 
    $(".moving").each(function() { 
     a = $(this).offset().top 
     b = $(window).scrollTop() + $(window).height(); 
     if (a < b) $(this).animate({ 
      'right':'100%', 
     }); 
    }); 

}); 

Answer 2

Ich weiß nicht kn ow, wie dies manuell zu tun, aber ich weiß, dass, obwohl mit Scroll-Effekte jQuery-Plugin existieren - scrollmagic http://scrollmagic.io/