.wrapper {
/* The height needs to be set to a fixed value for the effect to work.
* 100vh is the full height of the viewport. */
height: 100vh;
/* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
overflow-x: hidden;
/* Enable scrolling on the page. */
overflow-y: auto;
/* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
perspective: 2px;
}
.section {
/* Needed for children to be absolutely positioned relative to the parent. */
position: relative;
/* The height of the container. Must be set, but it doesn't really matter what the value is. */
height: 100vh;
/* For text formatting. */
display: flex;
align-items: center;
justify-content: center;
color: white;
text-shadow: 0 0 5px #000;
}
.parallax::after {
/* Display and position the pseudo-element */
content: " ";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
/* Move the pseudo-element back away from the camera,
* then scale it back up to fill the viewport.
* Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
transform: translateZ(-1px) scale(1.5);
/* Force the background image to fill the whole element. */
background-size: 100%;
/* Keep the image from overlapping sibling elements. */
z-index: -1;
}
/* The styling for the static div. */
.static {
background: red;
}
/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
background-image: url('https://placekitten.com/g/900/700');
}
.bg2::after {
background-image: url('https://placekitten.com/g/800/600');
}