图片在网页上滚动时在网页上移动

Question

如何在图片滚动时使图片在网站上略微移动。

苹果在许多地方都在他们的网站上这样做。

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

即，转到iPad Pro站点并向下滚动到A9X芯片部分。你可以看到iPad的移动速度比滚动方向稍快。上或下。非常微妙的举动，但非常整齐。

因此，图像在视图中时必须移动。我已经使用下面的代码在视图中添加了in-view类，并在它不在时删除它。现在，它需要得到其移动基于滚动...

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

似乎skrollr.js是这个完美的插件。这里是我为演示创建的笔的链接。 http://codepen.io/anon/pen/VaVMeN

和脚本

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

你可以skrollr这里： https://github.com/Prinzhorn/skrollr