jQuery 平滑背景图像的视差滚动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15789026/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Smoothing the parallax scrolling of a background image
提问by Chuck Le Butt
I've done a bit of research and written a simple bit of jQuery that scrolls the background at a slightly different pace to the foreground, creating a parallaxing effect as you scroll down a website.
我做了一些研究并编写了一个简单的 jQuery 代码，它以与前景略有不同的速度滚动背景，在您向下滚动网站时产生视差效果。
Unfortunately it's a bit jerky.
不幸的是，它有点生涩。
Here's the basic layout of the HMTL:
这是 HMTL 的基本布局：
<body>
<section>
Site content goes here.
</section>
</body>
Here's the CSS:
这是CSS：
body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
}
Here's the JS:
这是JS：
$(window).scroll(function () {
$("body").css("background-position","50% " + ($(this).scrollTop() / 2) + "px");
});
https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/
https://jsfiddle.net/JohnnyWalkerDesign/ksw5a0Lp/
Pretty simple, but my problem is that it's a bit jerky when you scroll, even on a powerful computer.
很简单，但我的问题是，即使在功能强大的计算机上滚动时，它也会有点生涩。
Is there a way to make the background parallax animate smoothly?
有没有办法让背景视差动画流畅？
回答by mcmonkeys1
Add transition property to your CSS so it can be accelerated by the GPU like this:
将过渡属性添加到您的 CSS，以便 GPU 可以像这样加速它：
body {
background-image: url('../images/bg.png');
background-repeat: repeat-y;
background-position: 50% 0;
transition: 0s linear;
transition-property: background-position;
}
回答by CherryFlavourPez
Try animating a property that can be hardware accelerated in browsers that support it. Rather than changing the background-positionproperty, use an absolutely positioned imgand then change its position using CSS transforms.
尝试动画一个可以在支持它的浏览器中进行硬件加速的属性。与其更改background-position属性，不如使用绝对定位img，然后使用 CSS 转换更改其位置。
Take a look at stellar.js. That plugin gives you the option of animating using CSS transforms in capable browsers (stellar.js will let you animate background images, with the caveat that it won't work as smoothly on mobile devices). It also makes use of requestAnimationFrame, meaning less CPU, GPU, and memory usage.
看看stellar.js。该插件为您提供了在功能强大的浏览器中使用 CSS 转换进行动画制作的选项（stellar.js 可以让您制作背景图像的动画，但需要注意的是它在移动设备上无法流畅运行）。它还利用requestAnimationFrame，这意味着更少的 CPU、GPU 和内存使用。
If you deem a plugin overkill, you can at least check out the approach taken and adapt it to your needs.
如果您认为插件过大，您至少可以检查所采用的方法并使其适应您的需求。
回答by Shwetha
Set the css of the body as below:
设置body的css如下：
body {
background-image: url(images/bg.jpg);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: 0 0;
}
Then using Javascript just get the pageYOffset on page scrolling, and set it to background position of the body background image as below:
然后使用Javascript在页面滚动时获取pageYOffset，并将其设置为主体背景图像的背景位置，如下所示：
window.addEventListener('scroll', doParallax);
function doParallax(){
var positionY = window.pageYOffset/2;
document.body.style.backgroundPosition = "0 -" + positionY + "px";
}
Just checkout my post here: http://learnjavascripteasily.blogspot.in/
只需在这里查看我的帖子：http: //learnjavascripteasily.blogspot.in/
回答by tuliomarchetto
Sometimes we can not use a <img>element inside a div for some reasons like a border-radiusmay stop working or a widthbigger the than parent. I was facing all these issues and the best solution I found was to use:
有时我们不能<img>在 div 中使用元素，例如 aborder-radius可能停止工作或width比父元素大。我面临着所有这些问题，我找到的最佳解决方案是使用：
transition: 0.5s ease;
transform: translate3d(0, 0, 0);
I got really nice and smooth parallax effect using GPU.
我使用 GPU 获得了非常漂亮和平滑的视差效果。
回答by Picard
To make it smooth put the image on a separate div and move the whole element using transform: translate - then you will get really smooth results.
为了使其平滑，将图像放在单独的 div 上并使用 transform: translate 移动整个元素 - 然后您将获得非常平滑的结果。
Here is a little example doing something a little bit different but using translate to give you the idea:
这是一个小例子，做了一些不同的事情，但使用 translate 来给你这个想法：
HTML:
HTML：
<div id="wrapper">
<div id="content">Foreground content</div>
</div>
CSS:
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;
}
and the fiddle: http://jsfiddle.net/piotku/kbqsLjfL/
和小提琴：http: //jsfiddle.net/piotku/kbqsLjfL/
from within javascript (using jQuery) you would have to use something like:
在 javascript (使用 jQuery) 中，您必须使用以下内容：
$(".element").css("transform", 'translateY(' + ($(this).scrollTop() / 2) + 'px)');
or in vanillaJS:
或在 vanillaJS 中：
backgroundElement.style.transform = 'translateY(' + ($(this).scrollTop() / 2) + 'px)';
回答by Marc Uberstein
Try changing the .cssto .animate. so instead of setting the CSS to hard values you can animate it.
尝试将 更改.css为.animate。因此，您可以为其设置动画，而不是将 CSS 设置为硬值。
$(window).scroll(function () {
$("body").animate({"background-position":"50% " + ($(this).scrollTop() / 2) + "px"},{queue:false, duration:500});
});
NB: add script http://snook.ca/technical/jquery-bg/jquery.bgpos.js
注意：添加脚本http://snook.ca/technical/jquery-bg/jquery.bgpos.js
Please keep in mind I haven't tested it, let me know if it works.
请记住，我还没有测试过它，让我知道它是否有效。
Animate Background images : http://snook.ca/archives/javascript/jquery-bg-image-animations
动画背景图像：http: //snook.ca/archives/javascript/jquery-bg-image-animations
