jQuery 中的垂直視差

Question

我目前正在建立我的投資組合網站，我遇到了一點困難，基本上我有兩個小問題......

1. 當 position 在 x 軸上包含“中心”屬性時，我無法讓背景 position 在 y 軸上設置動畫

2. 滾動時無法獲得效果，停止滾動時暫停，繼續滾動時繼續

這是我正在使用的代碼：

//Top section parallax
$(function parallaxInnerAnimation(){

    //Reset the background position
    $('#first-canvas .inner').css({backgroundPosition: 'center 0px'});

    //Set the animations
    $(window).scroll(function() {
        $('#first-canvas .inner').animate({
        backgroundPosition:"(center -200px)"
        }, 5000, 'linear');
    });

});

我正在使用 Alexander Farkas 的 jquery.backgroundPosition 插件 v1.22 和 jQuery 1.6.1。

這個站點是 css3 和 html5，主要是為了支持 IE9，Firefox 4，和 Chrome 11 等向后兼容性...我可以為舊版瀏覽器犧牲一個不同的站點

抱歉，如果這是一個愚蠢的問題，我不是真正的開發人員，更多的是可以編寫前端代碼的設計師，在此先感謝。

更新：

為了把它放在上下文中，我現在把它放在我的實時服務器http://charlieryan.co.uk/stack-overflow/

Answer 1

$(window).scroll(function ()
{
 var yPos=-($(window).scrollTop() / 6);
 if($(window).scrollTop()>100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px";
 }
 if($(window).scrollTop()<100)
 {
  document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%";
 }
});

官方教程在這里

Answer 2

我查看了 backgroundPosition.charlieryan.js 插件，它不支持中心背景 position。 您可能必須修改插件並使用它。 有一個名為 toArray 的方法，我應該對其進行修改。 js錯誤與此問題有關。 如果您需要更多幫助，請告訴我。