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错误与此问题有关。 如果您需要更多帮助，请告诉我。