jQuery中的垂直视差答案

【问题标题】：Vertical Parallax in jQueryjQuery中的垂直视差
【发布时间】：2011-09-01 19:17:21
【问题描述】：

我目前正在构建我的投资组合网站，但遇到了一点困难，基本上我有两个小问题......

当位置在 x 轴上包含“中心”属性时，我无法让背景位置在 y 轴上设置动画
滚动时无法获得效果，停止滚动时暂停，继续滚动时继续

这是我正在使用的代码：

//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/

【问题讨论】：

你有活生生的例子吗？这听起来很有趣，但很难知道出了什么问题。
我没有，但我只是把它放在我的服务器上 - charlieryan.co.uk/stack-overflow 谢谢！
我一滚动就收到一个 javascript 错误：line 42 of backgroundPosition.charlieryan.js: res is null。这可能是您的问题。
我也看到了，但不知道为什么

标签： jquery css jquery-plugins frontend parallax

【解决方案1】：

我查看了 backgroundPosition.charlieryan.js 插件，它不支持中心背景位置。您可能必须修改插件并使用它。有一个名为 toArray 的方法，我应该对其进行修改。 js错误与此问题有关。如果您需要更多帮助，请告诉我。

【讨论】：

谢谢，我一直在研究这个，但我远非专家（脚本毕竟不是我写的，这个名字只是因为我在数百个网站上工作并且它很容易组织这样的东西），我该怎么做呢？
请将该插件中的 toArray 方法替换为以下代码函数 toArray(strg){ strg = strg.replace(/left|top/g,'0px'); strg = strg.replace(/right|bottom/g,'100%'); strg = strg.replace(/center/g,'50%'); strg = strg.replace(/-\s/g,'-'); strg = strg.replace(/([0-9\.]+)(\s|)|$)/g,"$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%| em|pt)/);返回 [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; } 这将解决问题。
太好了，谢谢，现在我必须解决问题的第二部分（关于滚动）

【解决方案2】：

$(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%";
 }
});

官方教程here

【讨论】：