how to do parallax scrolling
//WORKING EXAMPLE
<main class="wrapper">
<section class="section parallax bg1">
<h1>Such Adorableness</h1>
</section>
<section class="section static">
<h1>Boring</h1>
</section>
<section class="section parallax bg2">
<h1>SO FWUFFY AWWW</h1>
</section>
</main>
.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');
}
Here’s a breakdown of what each class is for:
.wrapper - Sets the perspective and scroll properties for the whole page.
.section - Size, display, and text properties. Mostly not relevant to the parallax effect.
.static - Adds a background to a section, just for demonstration.
.parallax - Adds an ::after pseudo-element with the background image and transforms needed for the parallax effect.
.bg1, .bg2 - Adds the respective background images for each section. (You could use an img tag instead.)