Demo for CSS Sticky Parallax Sections

Preview
Source Code
                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
@import url('https://fonts.googleapis.com/css2?family=Lato&family=Playfair+Display:wght@700&display=swap');
:root {
	--scale: 0.1;
	--space: 8vmin;
	--font-primary: 'Lato', sans-serif;
	--font-heading: 'Playfair Display', serif;
}
@media (prefers-reduced-motion) {
	:root {
		--scale: 0;
	}
}
* {
	box-sizing: border-box;
}
body {
	color: hsl(0, 0%, 95%);
	background-color: hsl(5, 15%, 5%);
	font-size: clamp(1.2rem, 5vw, 1.5rem);
	font-family: var(--font-primary);
	line-height: 1.6;
}
a {
	color: hsl(65, 80%, 60%);
	text-decoration: none;
}
a:hover, a:focus {
	text-decoration: underline;
}
.page-title {
	text-align: center;
}
.page-title::after {
	content: '↓';
	display: block;
	font-size: 2em;
	opacity: 0;
	transform: translateY(-24px);
	-webkit-animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
	animation: fadein 800ms 500ms cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.header, .footer {
	display: grid;
	place-items: center;
	height: 100vh;
}
.section {
	transform-origin: center top;
	transform: scaleY(calc(1 - var(--scale)));
}
.section>* {
	transform-origin: center top;
	transform: scaleY(calc(1 / (1 - var(--scale))));
}
.section-title {
	font-family: var(--font-heading);
	font-size: clamp(2.5rem, 6vw, 4.5rem);
	font-weight: bold;
	line-height: 1.125;
}
.byline {
	display: block;
	font-size: 0.6em;
	margin: calc(var(--space) / 1.35) 0;
}
.content {
	position: relative;
	margin: -50vh auto 0;
	padding: var(--space);
	max-width: 55ch;
	width: calc(100% - var(--space));
	background: hsla(5, 15%, 5%, 0.9);
}
.content>*+* {
	margin-top: 2rem;
}
.image-container {
	position: sticky;
	top: 0;
	width: 100vw;
	height: 100vh;
	z-index: -2;
}
.image-container img {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	object-fit: cover;
}
.image-container::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 50%;
	background: linear-gradient( to bottom, hsla(5, 15%, 5%, 0) 0%, hsla(5, 15%, 5%, 0.013) 8.1%, hsla(5, 15%, 5%, 0.049) 15.5%, hsla(5, 15%, 5%, 0.104) 22.5%, hsla(5, 15%, 5%, 0.175) 29%, hsla(5, 15%, 5%, 0.259) 35.3%, hsla(5, 15%, 5%, 0.352) 41.2%, hsla(5, 15%, 5%, 0.45) 47.1%, hsla(5, 15%, 5%, 0.55) 52.9%, hsla(5, 15%, 5%, 0.648) 58.8%, hsla(5, 15%, 5%, 0.741) 64.7%, hsla(5, 15%, 5%, 0.825) 71%, hsla(5, 15%, 5%, 0.896) 77.5%, hsla(5, 15%, 5%, 0.951) 84.5%, hsla(5, 15%, 5%, 0.987) 91.9%, hsl(5, 15%, 5%) 100%);
}
@-webkit-keyframes fadein {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
@keyframes fadein {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}
</style>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<header class="header"> 
  <h1 class="page-title">CSS position sticky parallax effect</h1>
</header>
<main class="main">
  <section class="section">
    <figure class="image-container"><img src="https://picsum.photos/id/237/1200/800" alt=""/></figure>
    <article class="content">
        <h2 class="section-title">Let's Get to Know One Another</h2><span class="byline">Content provided by <a >link →</a></span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
    </article>
  </section>
  <section class="section">
    <figure class="image-container"><img src="https://picsum.photos/id/237/1200/800" alt=""/></figure>
    <article class="content">
        <h2 class="section-title">Some Stuff I Need to Get Off My Chest</h2><span class="byline">Content provided by <a  >link →</a></span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
    </article>
  </section>
  <section class="section">
    <figure class="image-container"><img src="https://picsum.photos/id/237/1200/800" alt=""/></figure>
    <article class="content">
        <h2 class="section-title">Call Me, Maybe</h2><span class="byline">Content provided by <a  >link →</a></span>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua Egestas purus viverra accumsan in nisl nisi</p>
    </article>
  </section>
</main>
<footer class="footer">Fine.</footer><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>
Other Codes

Javascript Disable/Enable Button

In this post, by clicking on the button in the middle of the page, the background will change color. The button also rotates as the background changes.
Generating and Rising Bubble Effect in HTML . . .

Using animated backgrounds will make your website more beautiful and will last longer in the mind of the website user. In this post, blue bubbles are . . .
Pure CSS Eye

In this post, an electronic eye is opened and an animation such as identification is performed for a few moments and then the electronic eye is closed.
Horizontal Scroll Section with Gsap Scrolltrigger . . .

Horizontal scrolling is implemented in this code, which is both attractive to the user and reduces the occupation of the physical space of the website.