32 css background effect parallax
这是我的身体的CSS代码:
body {
padding: 0;
margin: 0;
background-image: url("../images/background.jpg");
background-repeat: no-repeat;
background-color: grey;
background-size: 100%;
}
我想要做的是使图像滚动比页面上的其他所有内容慢,以产生简单的视差效果.我在网上看过,我见过的所有例子都比我想要的要复杂得多.
Neo*_*Neo 66
我偶然发现了这个我用纯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/
Tim*_* T. 14
我知道这已经很晚了，但我想知道它是否比上面的代码更容易工作，并投入了 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>您可以使用以下简单内容：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