圖片在網頁上滾動時在網頁上移動

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