Scribd
Upload
11 views

website_code

The document outlines a web page featuring a scroll-triggered fade-in/out animation effect for content presentation. It includes HTML structure, CSS styles for aesthetics, and JavaScript for functionality, ensuring a refined user experience. The design emphasizes elegance and sophistication through careful use of color, typography, and responsive layouts.

Uploaded by

tobbyzinfinity
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
11 views

website_code

The document outlines a web page featuring a scroll-triggered fade-in/out animation effect for content presentation. It includes HTML structure, CSS styles for aesthetics, and JavaScript for functionality, ensuring a refined user experience. The design emphasizes elegance and sophistication through careful use of color, typography, and responsive layouts.

Uploaded by

tobbyzinfinity
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 13

<!

DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Scroll Fade In/Out Effect</title>

<link rel="preconnect" href="https://fonts.googleapis.com">

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>

<link href="https://fonts.googleapis.com/css2?
family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap" rel="stylesheet">

<link rel="stylesheet" href="style.css">

</head>

<body>

<header>

<h1>Experience Elevated Design</h1>

<p>A scroll-triggered reveal with a touch of elegance.</p>

<div class="initial-scroll-space">

<p>Begin your journey through refined content...</p>

</div>

</header>

<main>

<section class="scroll-animation-item">

<h2>The Art of Presentation</h2>


<p>This content gracefully appears, inviting a deeper engagement with every scroll. Crafted for
discerning eyes.</p>

<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">

<p>Thank you for exploring. Further content awaits.</p>

</div>

</main>

<script src="script.js"></script>

</body>

</html>

The CSS

/* Lux Color Palette Variables */

:root {

--color-dark-navy: #1C2833; /* Deep, rich background/header */

--color-charcoal: #2C3E50; /* Slightly lighter dark tone */


--color-gold-accent: #DAA520; /* A classic gold accent */

--color-cream: #F8F8F8; /* Soft, warm off-white for backgrounds */

--color-light-gray: #ECF0F1; /* Very light neutral for contrast */

--color-text-dark: #333333; /* Standard dark text */

--color-text-light: #FFFFFF; /* White text for dark backgrounds */

/* Basic Reset & Body Styles */

body {

font-family: 'Georgia', serif; /* A more elegant serif font */

margin: 0;

padding: 0;

background-color: var(--color-cream); /* Soft cream background */

color: var(--color-text-dark); /* Standard dark text */

line-height: 1.6;

overflow-x: hidden; /* Prevent horizontal scrollbar */

/* Header Styling */

header {

background-color: var(--color-dark-navy); /* Deep navy header */

color: var(--color-text-light); /* White text on dark header */

text-align: center;

padding: 50px 20px;

height: 100vh;
display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

box-sizing: border-box;

header h1 {

font-family: 'Playfair Display', serif; /* A decorative serif for headings */

font-size: 3em;

margin-bottom: 10px;

color: var(--color-gold-accent); /* Gold accent for the main heading */

header p {

font-size: 1.2em;

opacity: 0.9;

.initial-scroll-space,

.final-scroll-space {

height: 100vh; /* Creates large vertical space for scrolling */

display: flex;

align-items: center;

justify-content: center;
background-color: var(--color-light-gray); /* Very light grey */

color: var(--color-charcoal); /* Darker text for contrast */

font-size: 1.3em; /* Slightly larger text for emphasis */

text-align: center;

margin-top: 50px;

margin-bottom: 50px;

font-style: italic;

letter-spacing: 0.5px;

/* Main Content Area */

main {

padding: 20px;

max-width: 900px;

margin: 0 auto;

/* Individual Section Styling */

section {

background-color: var(--color-text-light); /* White background for sections */

padding: 40px;

margin-bottom: 80vh; /* Large margin to create scroll space between sections */

border-radius: 12px; /* Slightly more pronounced rounded corners */

box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); /* Deeper, more luxurious shadow */

min-height: 250px;
display: flex;

flex-direction: column;

justify-content: center;

box-sizing: border-box;

border: 1px solid rgba(0,0,0,0.05); /* Subtle border for definition */

section:last-of-type {

margin-bottom: 50px; /* Adjust last section's margin */

section h2 {

font-family: 'Playfair Display', serif; /* Decorative serif for section headings */

color: var(--color-charcoal); /* Charcoal heading */

font-size: 2.2em;

margin-top: 0;

margin-bottom: 20px;

border-bottom: 2px solid var(--color-gold-accent); /* Gold line under headings */

padding-bottom: 10px;

display: inline-block; /* Makes border-bottom only as wide as text */

section p {

margin-bottom: 15px;

color: var(--color-text-dark);
}

/* --- Core Animation Styles --- */

/* Initial state: Hidden and slightly moved down */

.scroll-animation-item {

opacity: 0; /* Fully transparent */

transform: translateY(60px); /* Start 60px below its final position */

/* Define the transition for a smooth animation */

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 */

/* Optimize for animation performance */

will-change: opacity, transform;

/* Visible state: Fully opaque and in original position */

.scroll-animation-item.is-visible {

opacity: 1; /* Fully opaque */

transform: translateY(0); /* Move to original position */

/* Media Queries for Responsiveness */

@media (max-width: 768px) {

header h1 {

font-size: 2.5em;

}
header, .initial-scroll-space, .final-scroll-space {

padding: 30px 15px;

height: 80vh;

font-size: 1.1em;

section {

padding: 25px;

margin-bottom: 60vh;

section h2 {

font-size: 1.8em;

@media (max-width: 480px) {

header h1 {

font-size: 2em;

header, .initial-scroll-space, .final-scroll-space {

font-size: 1em;

height: 70vh;

section {
padding: 20px;

margin-bottom: 50vh;

section h2 {

font-size: 1.5em;

The script.js

document.addEventListener('DOMContentLoaded', () => {

// Select all elements that you want to animate

const scrollItems = document.querySelectorAll('.scroll-animation-item');

// Function to check if elements are in view and apply/remove classes

const checkIfInView = () => {

const windowHeight = window.innerHeight; // Get the height of the browser window

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".

const triggerPoint = windowHeight * 0.8;

// 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)

const outOfViewBottom = windowHeight;

// Condition for **fading IN**:

// 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)

const isVisible = (itemRect.top < triggerPoint) && (itemRect.bottom > outOfViewTop);

// Condition for **fading OUT**:

// If the item is currently visible (has the 'is-visible' class)

// 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)

const hasScrolledPast = item.classList.contains('is-visible') &&

((itemRect.top >= outOfViewBottom) || (itemRect.bottom <= outOfViewTop));


// Apply or remove the 'is-visible' class based on visibility

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),

// we do nothing. It remains hidden.

});

};

// --- Performance Optimization: Throttling Scroll Events ---

// Scroll events fire very rapidly. Throttling limits how often our checkIfInView function runs,

// preventing performance issues and a "janky" scrolling experience.

let throttleTimeout;

const throttleDelay = 100; // Run checkIfInView at most every 100 milliseconds

const throttledCheck = () => {

// If there's no timeout currently active, set one

if (!throttleTimeout) {

throttleTimeout = setTimeout(() => {

checkIfInView(); // Execute the check function

throttleTimeout = null; // Reset the timeout for the next interval


}, throttleDelay);

};

// --- Event Listeners ---

// 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);

});

You might also like