我正在尝试做类似的事情(在js,html,sass中):
- 当我向下滚动页面时,我的图层(地面,天空,空间等)会下降
- 我的内容(将是一枚正在空中飞翔的火箭)停留在屏幕中间,并且会像要飞行一样向两侧移动(稍后再讲)
- 某些元素将在层上移动(例如小行星从右向左或其他方向移动)(稍后)
这是我尝试过的一些代码思想,但这似乎很奇怪,无法按预期工作;如您所见,各层正在按预期方式滚动,但由于某种原因它们并没有全部显示,它们似乎填满了所有页面的大小,但它们不应该,而且我正在Internet上四处转转,没有似乎有人做了这样的事情。
// Functions
detectPageVerticalPosition = () => {
pageVerticalPosition = pageYOffset;
};
getDivs = () => {
for (
let div = document.getElementsByTagName("div"),i = 0; i < div.length; i++
) {
div[i].getattribute("class") == "layer-vertical" &&
layerVerticalArray.push(div[i]);
}
console.log("layerVerticalArray: ",layerVerticalArray);
};
moveLayers = () => {
for (let i = 0; i < layerVerticalArray.length; i++) {
layerVerticalArray[i].style.bottom = -1 * pageVerticalPosition + "px";
}
};
// End Functions
// Variables
var pageVerticalPosition = 0,layerVerticalArray = new Array();
// End Variables
// Events
window.onload = e => {
getDivs();
// console.log(layerVerticalArray);
};
window.onscroll = e => {
detectPageVerticalPosition();
moveLayers();
};
// End Events
body {
margin: 0;
}
#page {
position: relative;
height: 20000px;
width: 100%;
}
#rocket-container {
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
#rocket-container #rocket {
position: absolute;
width: 100px;
height: 100px;
left: calc(50% - 50px);
top: calc(50% - 50px);
}
#background-container {
position: fixed;
height: 100%;
width: 100%;
background-color: red;
overflow: hidden;
}
#background-container .layer-vertical {
width: 100%;
height: 3500px;
}
#background-container #layer-vertical-1 {
position: absolute;
background-color: blue;
}
#background-container #layer-vertical-1 #cloud-1 {
outline-style: dashed;
right: 0px;
}
#background-container #layer-vertical-1 #cloud-2 {
outline-style: dotted;
bottom: 0px;
}
#background-container #layer-vertical-2 {
background-color: green;
}
#background-container #layer-vertical-3 {
background-color: purple;
}
.cloud {
position: absolute;
width: 180px;
height: 120px;
background-image: url(../images/cloud.png);
}
<div class="page">
<div class="background-container">
<div class="layer-vertical" id="layer-vertical-1">
Layer 1
<div class="cloud" id="cloud-1"></div>
<div class="cloud" id="cloud-2"></div>
</div>
<div class="layer-vertical" id="layer-vertical-2">
Layer 2
</div>
<div class="layer-vertical" id="layer-vertical-3">
Layer 3
</div>
</div>
<div id="rocket-container">
<div id="rocket">STAY MIDDLE</div>
</div>
</div>