Bild bewegt sich auf einer Website beim Scrollen über

Question

Wie kann ich Bild leicht auf einer Website bewegen, wenn ich über sie scrollen.

Apple hat dies an vielen Orten auf ihrer Website getan.

http://www.apple.com/ipad-pro/

Ie. Gehen Sie zur iPad Pro-Website und scrollen Sie nach unten zum A9X Chip-Teil. Sie können sehen, wie sich das iPad etwas schneller bewegt, als Sie zum Bildlauf scrollen. Hoch oder runter. Sehr subtile Bewegung, aber sehr ordentlich.

Also Bild muss sich bewegen, wenn es in Sicht ist. Ich habe den folgenden Code verwendet, um die Klasse in-view hinzuzufügen, wenn sie angezeigt wird, und sie zu entfernen, wenn dies nicht der Fall ist. Jetzt muss es, um es auf eine Rolle basiert Bewegen ...

var $animation_elements = $('img'); 
 
    var $window = $(window); 
 

 
    function check_if_in_view() { 
 
    var window_height = $window.height(); 
 
    var window_top_position = $window.scrollTop(); 
 
    var window_bottom_position = (window_top_position + window_height); 
 

 
    $.each($animation_elements, function() { 
 
     var $element = $(this); 
 
     var element_height = $element.outerHeight(); 
 
     var element_top_position = $element.offset().top; 
 
     var element_bottom_position = (element_top_position + element_height); 
 

 
     //check to see if this current container is within viewport 
 
     if ((element_bottom_position >= window_top_position) && 
 
     (element_top_position <= window_bottom_position)) { 
 
     $element.addClass('in-view'); 
 
     } else { 
 
     $element.removeClass('in-view'); 
 
     } 
 
    }); 
 
    } 
 

 
    $window.on('scroll resize', check_if_in_view); 
 
    $window.trigger('scroll');

Answer 1

Es scheint, dass skrollr.js ist perfekt Plugin dafür. Hier ist der Link zum Stift, den ich für die Demo erstellt habe. http://codepen.io/anon/pen/VaVMeN

und Skript

skrollr.init({ 
    forceHeight: false, 
    smoothScrollingDuration: 1000 
}); 

können Sie erhalten skrollr hier: https://github.com/Prinzhorn/skrollr