On websites that have pages for displaying long text, this code can be used to beautify that page and increase the user's attention in reading the page. There is a dark background below the text, which is transparent and the image below is clear. This photo is full width and ends when the text of the photo is finished. The end of the photo is blurred with the same background color of the text.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
@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);
}
}
