(CSS) 使背景图片滚动得比其他任何东西都慢
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29240028/
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
(CSS) Make a background image scroll slower than everything else
提问by Neo
here is is my CSS code for the body:
这是我的身体 CSS 代码：
body {
padding: 0;
margin: 0;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-color: grey;
background-size: 100%;
}
What I want to do is make it so that the image scrolls slower than everything else on the page to make a simple parallax effect. I've looked online and all of the examples I've seen are much more complicated than what I want.
我想要做的是使图像滚动得比页面上的其他所有内容都慢，以产生简单的视差效果。我在网上查看过，我看到的所有示例都比我想要的要复杂得多。
回答by Neo
I stumbled upon this looking for more flexibility in my parallax speed that I have created with pure CSS and I just want to point out that all these people are wrong and it is possible with pure CSSIt is also possible to control the height of your element better.
我偶然发现了这一点，我在使用纯 CSS 创建的视差速度中寻找更大的灵活性，我只想指出所有这些人都错了，纯 CSS 是可能的，也可以控制元素的高度更好的。
You will probably have to edit your DOM/HTML a bit to have some container elements, in your case you are applying the background to the body which will restrict you a lot and doesn't seem like a good idea.
您可能需要稍微编辑 DOM/HTML 以获得一些容器元素，在您的情况下，您将背景应用于正文，这将限制您很多并且似乎不是一个好主意。
http://keithclark.co.uk/articles/pure-css-parallax-websites/
http://keithclark.co.uk/articles/pure-css-parallax-websites/
Here is how you control the height with Viewport-percentage lenghts based on screen size:
以下是根据屏幕尺寸使用视口百分比长度控制高度的方法：
https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
https://stanhub.com/how-to-make-div-element-100-height-of-browser-window-using-css-only/
.forefront-element {
-webkit-transform: translateZ(999px) scale(.7);
transform: translateZ(999px) scale(.7);
z-index: 1;
}
.base-element {
-webkit-transform: translateZ(0);
transform: translateZ(0);
z-index: 4;
}
.background-element {
-webkit-transform: translateZ(-999px) scale(2);
transform: translateZ(-999px) scale(2);
z-index: 3;
}
Layer speed is controlled by a combination of the perspective and the Z translation values. Elements with negative Z values will scroll slower than those with a positive value. The further the value is from 0 the more pronounced the parallax effect (i.e. translateZ(-10px) will scroll slower than translateZ(-1px)).
图层速度由透视和 Z 平移值的组合控制。具有负 Z 值的元素将比具有正值的元素滚动得更慢。该值离 0 越远，视差效果越明显（即 translateZ(-10px) 将比 translateZ(-1px) 滚动得慢）。
Here is a demo I found with a google search because I know there are a lot of non-believers out there, never say impossible:
这是我通过谷歌搜索找到的一个演示，因为我知道那里有很多非信徒，永远不要说不可能：
http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
回答by Piotr Ciszewski
you can use something simple like here: html:
你可以使用一些简单的东西，比如这里：html：
Motion
运动
css:
css：
body {
min-height:4000px;
background-image: url("http://www.socialgalleryplugin.com/wp-content/uploads/2012/12/social-gallery-example-source-unknown-025.jpg");
}
h1 {margin-top:300px;}
js:
js：
(function(){
var parallax = document.querySelectorAll("body"),
speed = 0.5;
window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){
var windowYOffset = window.pageYOffset,
elBackgrounPos = "50% " + (windowYOffset * speed) + "px";
el.style.backgroundPosition = elBackgrounPos;
});
};
})();
Here is jsfiddle
这是jsfiddle
回答by Tim T.
I know this is very late, but I wondered wether it would not be working easier than the codes above and invested 15 mins of my live.
Here is my code:
我知道这已经很晚了，但我想知道它是否比上面的代码更容易工作，并投入了 15 分钟的时间。
这是我的代码：
document.getElementById("body").onscroll = function myFunction() {
var scrolltotop = document.scrollingElement.scrollTop;
var target = document.getElementById("main1");
var xvalue = "center";
var factor = 0.5;
var yvalue = scrolltotop * factor;
target.style.backgroundPosition = xvalue + " " + yvalue + "px";
}#main1 {
background-image: url(https://images.unsplash.com/photo-1506104489822-562ca25152fe?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9);
background-position: top center;
background-attachment:scroll;
background-size: cover;
height: 80vh;
width: 100%;
}
#placeholdersoyoucanscroll{
height:100vh
}<body id="body">
<main>
<div id="main1">
</div>
<div id="placeholdersoyoucanscroll">
</div>
</main>
</body>回答by Valentin Seehausen
If you want to apply a high background image, use this JS:
如果要应用高背景图像，请使用此 JS：
(function () {
var body = document.body,
e = document.documentElement,
scrollPercent;
$(window).unbind("scroll").scroll(function () {
scrollPercent = 100 * $(window).scrollTop() / ($(document).height() - $(window).height());
body.style.backgroundPosition = "0px " + scrollPercent + "%";
});
})();
回答by Vuk Djapic
Agree that it isn't possible just with css, because you have to compute image and document height ratio. I also like this effect, that's why created simple function that does just that. Here is function and its call on scroll event:
同意仅使用 css 是不可能的，因为您必须计算图像和文档的高度比。我也喜欢这种效果，这就是为什么创建简单的函数来做到这一点。这是函数及其对滚动事件的调用：
$(window).on('scroll', function() {
smoothBackgroundScroll("relative/image/url");
});
function smoothBackgroundScroll(imgsrc) {
function loadImageHeight(url, width) {
var img = new Image();
img.src = url;
if (width) {
img.width = width;
}
return img.height;
}
var dh, wh, ih, st, posy, backh, backw;
if (!this._smoothBackgroundScroll) {
var bcksize = $(document.body).css('background-size');
var bmatch = /(\w+)\s*(\w+)/.exec(bcksize);
if (!bmatch || bmatch.length < 3) {
backh = loadImageHeight(imgsrc)
} else {
backh = parseInt(bmatch[2]);
if (isNaN(backh)) {
backw = parseInt(bmatch[1]);
backh = loadImageHeight(imgsrc, parseInt(backw));
}
}
this._smoothBackgroundScroll = {
dh: $(document).height()
, wh: $(window).height()
, ih: backh
}
}
dh = this._smoothBackgroundScroll.dh;
wh = this._smoothBackgroundScroll.wh
ih = this._smoothBackgroundScroll.ih;
st = $(document).scrollTop();
posy = (dh - ih) * st / (dh - wh);
document.body.style.backgroundPosition = 'center ' + posy + 'px';
}You can find it here along with example and visual explanation what's really going on with image and document:
您可以在此处找到它以及图像和文档真正发生的情况的示例和视觉解释：
回答by tjespe
I realize that this is an old question, however, I recently stumbled upon this problem myself and spent a lot of time trying to find the best working code. Everything I found was either too complicated or didn't work without lagging a lot, especially in Chrome. As pointed out by others, the problem cannot be solved by pure CSS, but I made my own simple AngularJS directive to solve the problem:
我意识到这是一个老问题，但是，我最近自己偶然发现了这个问题，并花了很多时间试图找到最好的工作代码。我发现的所有东西要么太复杂，要么在没有很多滞后的情况下不起作用，尤其是在 Chrome 中。正如其他人所指出的，这个问题不能通过纯 CSS 来解决，但我自己做了一个简单的 AngularJS 指令来解决这个问题：
app.directive("paraBack", ['$window', function ($window) {
return function(scope, element, attrs) {
element.css("background-image", "url("+attrs.paraBack+")"); // Apply the background image with CSS
element.css("background-attachment", "fixed"); // Disable background scrolling
var max = Infinity;
var image = new Image(); // Create a JavaScript image so that the code below can be run when the background is loaded
image.src = attrs.paraBack;
image.onload = function () {
max = image.height - window.innerHeight; // Stop scrolling after the bottom of the picture is reached
var xOffset = -(image.width/2-window.innerWidth/2);
element.css("background-position-x", xOffset+'px'); // Horizontally align the background
}
var scrollHandler = function () {
var offset = Math.floor(this.pageYOffset*0.1); // Set background to scroll at 10% of scrolling speed
if (offset<max) {
element.css('background-position-y', '-'+offset+'px'); // If not the bottom of the image is reached, move the background (scroll)
}
};
angular.element($window).on('scroll', scrollHandler); // Set the defined scrollHandler function to be ran when user scroll
scope.$on('$destroy', function () {
angular.element($window).off('scroll', scrollHandler); // Unbind the function when the scope is destroyed
});
};
}]);
It can be used in the html like this:
它可以像这样在 html 中使用：
<body para-back="url/to/image">
If you want to see an example of what it looks like, you can visit this page.
如果您想查看它的外观示例，可以访问此页面。
回答by klewis
I also was looking for a modern and intuitive approach to adjusting my background scroll speed. You should try out the Simple Parallax Scrolling jQuery Plug-in, inspired by Spotify.com.
我也在寻找一种现代且直观的方法来调整我的背景滚动速度。您应该尝试受 Spotify.com 启发的Simple Parallax Scrolling jQuery Plug-in。
Once you have it attached to your project, along with a big image to play with, this is one of many ways to set it up.
一旦你将它附加到你的项目中，连同一个大图像一起玩，这是设置它的众多方法之一。
The HTML | setup your containers and basic parallax attributes on element.
HTML | 在元素上设置容器和基本视差属性。
<main>
<section>Some Content Above it</section>
<div class="parallax-container" data-parallax="scroll" data-position="top" style="height: 80vh;"></div>
<section>Some Content Below it</section>
</main>
The jQuery | Here, you can play with additional parameters based on the docs
jQuery | 在这里，您可以根据文档使用其他参数
function parallaxjs() {
$('.parallax-container').parallax({
imageSrc: '/<path-to-your-image>/<your-big-image>.jpg',
naturalWidth: 1071, //your image width value
naturalHeight: 500, //your image height value
bleed: 0,
});
}
(function () {
parallaxjs();
})($);
回答by linuscl
Best way is to do it with jQuery. There are a lot of sites about this, for example:
最好的方法是用 jQuery 来做。有很多关于这个的网站，例如：
