Skip to content

Enhancement: Improved the overall design of the home page #584

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Enhancement: Improved the overall design of the home page #584

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
697bfb6
Fixed Issue: Resolved the scroll unblur text effect page
Oct 11, 2024
e8baf75
Enhanced the overall homepage design
Ambit-ion Oct 11, 2024
df37e11
Enhanced home page design completely
Ambit-ion Oct 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 26 additions & 24 deletions Scroll-Unblur-Text-Effect/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,32 +1,34 @@
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Unblur Text Effect</title>
<link rel="stylesheet" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Scroll Unblur Text Effect</title>
<link rel="stylesheet" href="style.css">
</head>

<body>
<div class="scroll-container">
<section class="text-section">
<h1>
<span class="word" style="--i: 0;">This</span>
<span class="word" style="--i: 1;">is</span>
<span class="word" style="--i: 2;">so</span>
<span class="word" style="--i: 3;">good</span>
<span class="word" style="--i: 4;">✨</span>
</h1>
</section>
</div>

<hr />
<div class="scroll-container">
<section class="text-section">
<!-- Banner -->
<div class="banner">Scroll to unblur</div>
<h1>
<span class="word" style="--i: 0;">This</span>
<span class="word" style="--i: 1;">is</span>
<span class="word" style="--i: 2;">so</span>
<span class="word" style="--i: 3;">good</span>
<span class="word" style="--i: 4;">✨</span>
</h1>
</section>
</div>

<div class="container">
<h2>your content goes here :)</h2>
<p>credits: <a href="https://arjuncodess.vercel.app/">@arjuncodess</a></p>
</div>
</body>
<hr />

</html>
<div class="container">
<h2>your content goes here :)</h2>
<p>credits: <a href="https://arjuncodess.vercel.app/">@arjuncodess</a></p>
</div>

<script src="script.js"></script>
</body>
</html>
30 changes: 30 additions & 0 deletions Scroll-Unblur-Text-Effect/script.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
// script.js
const textSection = document.querySelector('.text-section');

window.addEventListener('scroll', () => {
// Get the current scroll position
const scrollY = window.scrollY;
const sectionHeight = textSection.offsetHeight;

// Define a threshold for keeping the text clear (e.g., 1.5 times the section height)
const threshold = sectionHeight * 1.5; // Adjust this value to increase the area
const blurStart = threshold; // Where the blurring begins
const blurEnd = threshold + sectionHeight; // Where the blurring is complete

// Determine if the text section is in the viewport
if (scrollY < blurStart && scrollY >= 0) {
// As the user scrolls down, calculate how much to unblur
const percentageScrolled = Math.min(scrollY / sectionHeight, 1); // Limit to 1
textSection.style.setProperty('--blur-value', `${20 - (20 * percentageScrolled)}px`);
textSection.style.setProperty('--opacity-value', `${0.2 + (0.8 * percentageScrolled)}`);
} else if (scrollY >= blurStart && scrollY < blurEnd) {
// Gradually increase the blur and decrease opacity as we continue scrolling
const percentageBlurred = (scrollY - blurStart) / sectionHeight; // Calculate percentage for blurring
textSection.style.setProperty('--blur-value', `${20 * percentageBlurred}px`);
textSection.style.setProperty('--opacity-value', `${1 - percentageBlurred}`);
} else {
// If scrolled past the end of the blur area, apply full blur
textSection.style.setProperty('--blur-value', '20px');
textSection.style.setProperty('--opacity-value', '0.2');
}
});
91 changes: 50 additions & 41 deletions Scroll-Unblur-Text-Effect/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,56 +1,65 @@
/* General Reset */
body, html {
margin: 0;
padding: 0;
height: 100%;
font-family: Arial, sans-serif;
}

.scroll-container {
height: 200vh;
scroll-timeline: --section block;
}

.container {
height: 50vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}

.text-section {
}

/* Banner styles */
.banner {
position: absolute; /* Position it relative to text section */
top: 20px; /* Space from the top of the text section */
left: 50%; /* Center it horizontally */
transform: translateX(-50%); /* Center alignment */
background-color: rgba(255, 255, 255, 0.8); /* Light background */
color: #333; /* Dark text color */
padding: 5px 15px; /* Padding for a sleek look */
border-radius: 20px; /* Rounded corners */
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Subtle shadow */
font-size: 1rem; /* Font size */
font-weight: bold; /* Bold font */
z-index: 10; /* Ensure it’s above other elements */
}

/* Increased Scroll Container Height */
.scroll-container {
height: 300vh; /* Adjusted to create more scrollable space */
}

/* Text section remains in the middle */
.text-section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
position: sticky;
top: 0;
}
top: 0; /* Align to the top of the viewport */
overflow: hidden; /* Prevents overflow of content */
background: white; /* Optional: adds a background color */
}

h1 {
/* Heading styles */
h1 {
font-size: 4rem;
text-align: center;
}

h2 {
font-size: 2rem;
}

.word {
--pxPerWord: 20vh;
--start: calc(var(--i) * var(--pxPerWord));
--end: calc((var(--i) + 1) * var(--pxPerWord));
}

/* Initial word styles (blurred, low opacity) */
.word {
display: inline-block;
filter: blur(20px);
opacity: 0;
animation: fx linear both;
animation-timeline: scroll(root);
animation-range: var(--start) var(--end);
}

@keyframes fx {
to {
filter: blur(0);
opacity: 1;
filter: blur(var(--blur-value, 20px)); /* Use CSS variable for blur */
opacity: var(--opacity-value, 0.2); /* Use CSS variable for opacity */
transition: filter 0.2s ease, opacity 0.2s ease; /* Shortened transition duration */
}

/* Content container */
.container {
height: 100vh; /* Adjust to the desired height */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background: lightgray; /* Optional: for visibility */
}
}
Loading