这是我的正文 CSS 代码：
body {
padding: 0;
margin: 0;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-color: grey;
background-size: 100%;
}
我想要做的是让图像滚动的速度比页面上的其他所有内容都慢，从而产生简单的视差效果。我在网上查了一下，我看到的所有例子都比我想要的复杂得多。
【问题讨论】：
标签： css background parallax effect
我还在寻找一种现代且直观的方法来调整我的背景滚动速度。您应该试试受 Spotify.com 启发的 Simple Parallax Scrolling jQuery Plug-in。
将它附加到您的项目后，连同一张大图像一起玩，这是设置它的众多方法之一。
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>
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();
})($);
【讨论】：
我知道这已经很晚了，但我想知道它会不会比上面的代码更容易工作，并投入了 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>【讨论】：
target.style.backgroundPosition = xvalue + " " + yvalue + "px";这行代码替换为target.style.backgroundPosition = xvalue + " -" + yvalue + "px";
background-attachment: scroll 更改为background-attachment: fixed，修复了一个小的延迟并使其变得更好。
你可以在这里使用一些简单的东西： html:
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:
(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;
});
};
})();
这里是jsfiddle
【讨论】：
background-position 轻推。否则，很好的解决方案！
【讨论】：
我意识到这是一个老问题，但是，我最近自己偶然发现了这个问题，并花了很多时间试图找到最好的工作代码。我发现的所有东西要么太复杂，要么无法正常工作，尤其是在 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
});
};
}]);
它可以像这样在html中使用：
<body para-back="url/to/image">
如果您想查看它的外观示例，可以访问this page。
【讨论】：
我偶然发现这一点是为了在我用纯 CSS 创建的视差速度上寻找更大的灵活性，我只想指出所有 这些人都错了，纯 CSS 是可能的也可以更好地控制元素的高度。
您可能需要稍微编辑您的 DOM/HTML 以拥有一些容器元素，在您的情况下，您将背景应用于主体，这会限制您很多并且看起来不是一个好主意。
http://keithclark.co.uk/articles/pure-css-parallax-websites/
以下是根据屏幕尺寸使用视口百分比长度控制高度的方法：
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;
}
图层速度由透视和 Z 平移值的组合控制。具有负 Z 值的元素将比具有正值的元素滚动慢。该值距离 0 越远，视差效果越明显（即 translateZ(-10px) 的滚动速度将比 translateZ(-1px) 慢）。
这是我通过谷歌搜索找到的一个演示，因为我知道那里有很多非信徒，永远不要说不可能：
http://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/
【讨论】：
如果要应用高背景图片，使用这个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 + "%";
});
})();
【讨论】：
同意仅使用 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';
}您可以在此处找到它以及示例和视觉说明图像和文档的实际情况：
【讨论】：