Attempting to achieve the following effect in JavaScript, HTML, and Sass:
- When scrolling down the page, the layers (ground, sky, space, etc.) move downward
- The content (a rocket flying in the sky) stays centered on the screen and will move horizontally like it's flying
- Some elements will move within the layers (e.g., asteroids moving from right to left)
Here are some code snippets I've tried, but they don't work as intended. The layers scroll correctly, but not all of them are visible. They seem to fill the entire page, which is not the desired behavior. I've searched online for solutions, but haven't found anyone who has done something similar.
// 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 Eventsbody {
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>