12

我做了一些研究并编写了一个简单的 jQuery，它以稍微不同的速度滚动背景到前景，当您向下滚动网站时创建视差效果。

不幸的是，它有点生涩。

这是 HMTL 的基本布局：

<body>
    <section>
        Site content goes here.
    </section>
</body>

这是CSS：

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
}

这是JS：

$(window).scroll(function () {
    $("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});

https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/

很简单，但我的问题是滚动时有点生涩，即使在功能强大的计算机上也是如此。

有没有办法让背景视差动画流畅？

4

6 回答 6

16

将转换属性添加到您的 CSS，以便 GPU 可以像这样加速它：

body {
    background-image: url('../images/bg.png');
    background-repeat: repeat-y;
    background-position: 50% 0;    
    transition: 0s linear;
    transition-property: background-position;
}
于 2014-06-04T14:12:58.110 回答
7

尝试在支持它的浏览器中为可以硬件加速的属性设置动画。与其更改属性，不如background-position使用绝对定位img，然后使用 CSS 变换更改其位置。

看看stellar.js。该插件为您提供了在功能强大的浏览器中使用 CSS 转换制作动画的选项（stellar.js 可以让您为背景图像制作动画，但需要注意的是它在移动设备上无法顺利运行）。它还利用了requestAnimationFrame，这意味着更少的 CPU、GPU 和内存使用。

如果您认为插件矫枉过正，您至少可以检查所采用的方法并根据您的需要进行调整。

于 2013-04-03T13:55:07.307 回答
4

设置body的css如下：

body {
  background-image: url(images/bg.jpg); 
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: 0 0;
 }

然后使用Javascript只需获取页面滚动时的pageYOffset，并将其设置为body背景图像的背景位置，如下所示：

window.addEventListener('scroll', doParallax);
function doParallax(){
   var positionY = window.pageYOffset/2;
   document.body.style.backgroundPosition = "0 -" + positionY + "px";
}

只需在这里查看我的帖子：http: //learnjavascripteasily.blogspot.in/

于 2016-02-16T05:18:48.803 回答
2

有时我们不能<img>在 div 中使用元素，例如border-radius可能会停止工作或width大于父级。我面临所有这些问题，我发现的最佳解决方案是使用：

transition: 0.5s ease;
transform: translate3d(0, 0, 0);

我使用 GPU 获得了非常漂亮和平滑的视差效果。

于 2014-07-21T21:01:12.643 回答
1

为了使其平滑，将图像放在单独的 div 上并使用 transform: translate 移动整个元素 - 然后您将获得非常平滑的结果。

这是一个小例子，做一些不同的事情，但使用 translate 来给你这个想法：

HTML：

<div id="wrapper">
     <div id="content">Foreground content</div>
</div>

CSS：

@-webkit-keyframes MOVE-BG {
    0% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
    50% { 
        transform: translate(-250px, 0%);
        -webkit-transform: translate(-250px, 0%);
    }
    100% {
        transform: translate(0%, 0%);
        -webkit-transform: translate(0%, 0%);
    }
}

#wrapper {
    width: 300px;
    height: 368px;
    overflow: hidden;  
}
#content {
    width: 550px;
    height: 368px;
    background: url(http://www.gstatic.com/webp/gallery/1.jpg) 0% 0% repeat;
    text-align: center;
    font-size: 26px;
    color: #000;

    -webkit-animation-name: MOVE-BG;
    -webkit-animation-duration: 10s;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: infinite;
}

和小提琴：http: //jsfiddle.net/piotku/kbqsLjfL/

从javascript（使用jQuery）中，您必须使用类似的东西：

$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');

或在 vanillaJS 中：

backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
于 2017-03-29T06:25:11.963 回答
0

尝试将 更改.css为.animate。因此，您可以为其设置动画，而不是将 CSS 设置为硬值。

$(window).scroll(function () {
    $("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});

注意：添加脚本http://snook.ca/technical/jquery-bg/jquery.bgpos.js

请记住，我还没有测试过它，让我知道它是否有效。

动画背景图片：http ://snook.ca/archives/javascript/jquery-bg-image-animations

演示：http ://snook.ca/technical/jquery-bg/

于 2013-04-03T13:55:22.043 回答