jQuery 中的垂直视差

发布于 11-09 19:13 字数 966 浏览 6 评论 0原文

我目前正在构建我的作品集网站,我遇到了一些困难,基本上我有两个小问题...

  1. 当位置包含“中心”时,我无法让背景位置在 y 轴上进行动画处理x 轴上的属性

  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/

I'm currently building my portfolio site, and I'm having a little difficulty, basically I have two small problems...

  1. I cant get the background position to animate in the y axis when the position contains a "center" attribute on the x axis

  2. I cant get the effect to happen while scrolling ,pause when I stop scrolling, and continue when I continue to scroll

Here is the code i'm using:

//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');
    });

});

I'm using the jquery.backgroundPosition plugin v1.22 by Alexander Farkas, and jQuery 1.6.1.

This site is css3 and html5, and is mainly meant to support IE9, Firefox 4, and Chrome 11 etc... I'm making a different site for older browsers so backwards compatibility can be sacrificed

Sorry if its a dumb question, I'm not really a developer, more of a designer who can code front end stuff, thanks in advance.

UPDATE:

To put it in context, I have now placed it on my live server http://charlieryan.co.uk/stack-overflow/

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

给我一枪2024-11-16 19:13:06

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

I looked at backgroundPosition.charlieryan.js plugin, it do not support for center background position. You might have to modify the plugin and use it. There is a method called toArray which should me modified. The js error is related to this issue. Let me know if you need more help.

长安忆2024-11-16 19:13:06
$(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%";
 }
});

官方教程此处

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

official tutorial here

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文