jQuery移動元素然後釘住它並水平移動它

Question

我試圖完成對this site的影響，但我只需要根據滾動移動幾個東西。我的目標是讓籃球進入盒子，然後在向下滾動一點之後，盒子就會進入卡車，並且所有物體都水平地跨過頁面。另外，我希望在您向下滾動時發生這種情況，而不是像當前小提琴一樣向上滾動。

這裏我現在的Fiddle，最初是基於這個Fiddle。下面是js。

var fixedElement = false; 
    var changingMoment = 150; 
$(window).scroll(function() { 
// floatingContentMark lets us know where the element shall change from fixed to relative 
// and vice versa 
var distanceFromTop = $("#floatingContentMark").offset().top - $(this).scrollTop();  
    if ((distanceFromTop <= changingMoment && !fixedElement) || 
    (distanceFromTop >= changingMoment && fixedElement)) 
    { // either we came from top or bottom, same function is called 
     fixedElement = !fixedElement; 
    $('#box').trigger('fixElement'); 
    } 
    }); 

$('#box').bind('fixElement', function() { 
    if ($(this).css('position') != 'fixed') { 
    $(this).css('position', 'fixed') ; 
    $(this).css('top', changingMoment) ; 
} 
else { 
    $(this).css('position', 'relative') ; 
    $(this).css('top', 'auto') ; 
} 
}) ; 

Answer 1

我認爲如果您使用框架或jQuery插件進行自定義/視差滾動，您的項目會容易得多。快速谷歌搜索帶來了幾個，可以輕鬆做你想做的：

• skrollr
• scrollorama
• scrollpath
• sequence.js
• stellar.js
• scrolly
• NikeBetterWorld
• Scrolling Parallax
• jarallax
• superscrollarama

一些靈感，檢查出的頁面中列出here。