website_code
website_code
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="https://fonts.googleapis.com/css2?
family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">
</head>
<body>
<header>
<div class="initial-scroll-space">
</div>
</header>
<main>
<section class="scroll-animation-item">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut
labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.</p>
</section>
<section class="scroll-animation-item">
<h2>Unveiling Sophistication</h2>
<p>Discover information unveiled with subtle animation, ensuring a premium Browse experience
that delights and informs.</p>
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.</p>
</section>
<section class="scroll-animation-item">
<h2>Timeless Elegance</h2>
<p>Each section is designed to flow seamlessly, echoing the principles of timeless design and
effortless interaction.</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque
laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae
vitae dicta sunt explicabo.</p>
</section>
<section class="scroll-animation-item">
<h2>Exquisite Details</h2>
<p>The final animated segment completes the narrative, leaving a lasting impression of
meticulous attention to detail.</p>
<p>Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia
consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.</p>
</section>
<div class="final-scroll-space">
</div>
</main>
<script src="script.js"></script>
</body>
</html>
The CSS
:root {
body {
margin: 0;
padding: 0;
line-height: 1.6;
/* Header Styling */
header {
text-align: center;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-sizing: border-box;
header h1 {
font-size: 3em;
margin-bottom: 10px;
header p {
font-size: 1.2em;
opacity: 0.9;
.initial-scroll-space,
.final-scroll-space {
display: flex;
align-items: center;
justify-content: center;
background-color: var(--color-light-gray); /* Very light grey */
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
font-style: italic;
letter-spacing: 0.5px;
main {
padding: 20px;
max-width: 900px;
margin: 0 auto;
section {
padding: 40px;
min-height: 250px;
display: flex;
flex-direction: column;
justify-content: center;
box-sizing: border-box;
section:last-of-type {
section h2 {
font-size: 2.2em;
margin-top: 0;
margin-bottom: 20px;
padding-bottom: 10px;
section p {
margin-bottom: 15px;
color: var(--color-text-dark);
}
.scroll-animation-item {
transition: opacity 0.9s cubic-bezier(0.2, 0.8, 0.2, 1), transform 0.9s cubic-bezier(0.2, 0.8, 0.2, 1); /*
Slower, smoother ease */
.scroll-animation-item.is-visible {
header h1 {
font-size: 2.5em;
}
header, .initial-scroll-space, .final-scroll-space {
height: 80vh;
font-size: 1.1em;
section {
padding: 25px;
margin-bottom: 60vh;
section h2 {
font-size: 1.8em;
header h1 {
font-size: 2em;
font-size: 1em;
height: 70vh;
section {
padding: 20px;
margin-bottom: 50vh;
section h2 {
font-size: 1.5em;
The script.js
document.addEventListener('DOMContentLoaded', () => {
scrollItems.forEach(item => {
const itemRect = item.getBoundingClientRect(); // Get the size and position of the current
element
// Define the "trigger point" for when an item should start fading in.
// This is set to 80% of the viewport height from the top.
// So, when the top of the item scrolls above 80% of the viewport, it's considered "in view".
// Define the "out of view" point for the top (when item's bottom passes above the top of the
viewport)
const outOfViewTop = 0;
// Define the "out of view" point for the bottom (when item's top passes below the bottom of the
viewport)
// 1. The top of the item is above the trigger point (meaning it has scrolled into the lower part of
the screen)
// AND
// 2. The bottom of the item is still below the top of the viewport (meaning it hasn't completely
scrolled off the top)
// AND
// It has scrolled completely out of view from the bottom (itemRect.top >= outOfViewBottom)
// OR
// It has scrolled completely out of view from the top (itemRect.bottom <= outOfViewTop)
if (isVisible) {
item.classList.add('is-visible');
} else if (hasScrolledPast) {
item.classList.remove('is-visible');
// If an item is not visible AND not scrolled past (i.e., it's below the viewport, waiting to come in),
});
};
// Scroll events fire very rapidly. Throttling limits how often our checkIfInView function runs,
let throttleTimeout;
if (!throttleTimeout) {
};
// 1. Initial check when the page loads (to ensure elements already in view are animated)
checkIfInView();
// 2. Listen for 'scroll' events on the window, using the throttled function
window.addEventListener('scroll', throttledCheck);
// 3. Listen for 'resize' events on the window (important if window dimensions change)
window.addEventListener('resize', throttledCheck);
});