diff --git a/Scroll-Unblur-Text-Effect/index.html b/Scroll-Unblur-Text-Effect/index.html index 816a4a8d..826b1b6d 100644 --- a/Scroll-Unblur-Text-Effect/index.html +++ b/Scroll-Unblur-Text-Effect/index.html @@ -1,32 +1,34 @@ - - - - Scroll Unblur Text Effect - + + +Scroll Unblur Text Effect + - -
-
-

- This - is - so - good - ✨ -

-
-
-
+
+
+ + +

+This +is +so +good +✨ +

+
+
-
-

your content goes here :)

-

credits: @arjuncodess

-
- +
- \ No newline at end of file +
+

your content goes here :)

+

credits: @arjuncodess

+
+ + + + diff --git a/Scroll-Unblur-Text-Effect/script.js b/Scroll-Unblur-Text-Effect/script.js new file mode 100644 index 00000000..f3cb66f1 --- /dev/null +++ b/Scroll-Unblur-Text-Effect/script.js @@ -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'); +} +}); \ No newline at end of file diff --git a/Scroll-Unblur-Text-Effect/style.css b/Scroll-Unblur-Text-Effect/style.css index 8a4e1aaf..b6e75823 100644 --- a/Scroll-Unblur-Text-Effect/style.css +++ b/Scroll-Unblur-Text-Effect/style.css @@ -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 */ } -} \ No newline at end of file + \ No newline at end of file diff --git a/index.html b/index.html index 861b959b..6c0d6f71 100644 --- a/index.html +++ b/index.html @@ -2,505 +2,501 @@ - - - You Dont Need Javascript - + + +You Don’t Need JavaScript + - - - - -
- - -
- -
-
- - - - -
-

You Dont Need JavaScript

-

Explore the power of pure CSS with our collection of interactive demos and examples. -

-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
CategoryPages
3D and Animations - 3D Cube Animation - 3D Rotation Square - 3D Transform - Book Animation - Compass Loader - CSS Loader - Distorted Text Animation - DVD Screen Saver - Jumping Ball - Leaf Animation - Light Bulb Animation - Newton's Cradle - Pendulum - Scary Animation - Scroll Unblur Text Effect - Scroll Video Animation - Shuffling Squares - Square Animation - Square Rotation Animation -
CSS Art - Captain America Shield - Growing Flower - Panda Animation - Solar System -
Layout and Components - Accordion (CSS Radio Rules) - Accordion - Blog Post Cards - Neuocards - Blog Post Cards - Claycard - Blog Post Cards - Glasscard - Business Card - Button - Sliced Button - Slideshow - CSS Tables - CSS Toggle - Flex Property - Grid - Infinite Carousel - Login - Login Page - Rating Star - Responsive Footer - Responsive Hamburger Navbar - Search Bar and Tweet - Shapes - Sticky Header -
Websites and Projects - Bitcoin Website - Portfolio Website - RGB Color Game - Travelling Website - Real Estate Website -
Miscellaneous - Analog Clock - Cursor - Z Indexing - Clock App -
Examples - Card Slide Hover Effect - Image Border Hover Effect - Modern Sidebar - Profile Card Hover Effect - Spin Square Circle - To-Do List -
V2 - Floating Labels V2 - Buttons V2 -
Misc - Footer - Card Hover - Expandable Card Design - Basic Profile - Tree 1 - Tabs 2 - Author - Input Field - Hover 1 - Navbar - Modern Navbar Design - About - Slider - Menu 1 - Image Hover Gallery - Glassmorphism Card Design - Todo 1 - Tabs 1 - Carousel 1 - Carousel 2 - Carousel 3 - Glassmorphism Login Page -
FAQ Section - Claymorphism Theme - Glass Theme - Neumorphism Theme -
Other - Author - Web Demo -
-
- - - - - + +
+ + +Dark / Light +
+ +
+
+ + + + +
+

You Dont Need JavaScript

Explore the power of pure CSS with interactive demos and examples

+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
CategoryPages
3D and Animations +3D Cube Animation +3D Rotation Square +3D Transform +Book Animation +Compass Loader +CSS Loader +Distorted Text Animation +DVD Screen Saver +Jumping Ball +Leaf Animation +Light Bulb Animation +Newton's Cradle +Pendulum +Scary Animation +Scroll Unblur Text Effect +Scroll Video Animation +Shuffling Squares +Square Animation +Square Rotation Animation +
CSS Art +Captain America Shield +Growing Flower +Panda Animation +Solar System +
Layout and Components +Accordion (CSS Radio Rules) +Accordion +Blog Post Cards - Neuocards +Blog Post Cards - Claycard +Blog Post Cards - Glasscard +Business Card +Button +Sliced Button +Slideshow +CSS Tables +CSS Toggle +Flex Property +Grid +Infinite Carousel +Login +Login Page +Rating Star +Responsive Footer +Responsive Hamburger Navbar +Search Bar and Tweet +Shapes +Sticky Header +
Websites and Projects +Bitcoin Website +Portfolio Website +RGB Color Game +Travelling Website +Real Estate Website +
Miscellaneous +Analog Clock +Cursor +Z Indexing +Clock App +
Examples +Card Slide Hover Effect +Image Border Hover Effect +Modern Sidebar +Profile Card Hover Effect +Spin Square Circle +To-Do List +
V2 +Floating Labels V2 +Buttons V2 +
Misc +Footer +Card Hover +Expandable Card Design +Basic Profile +Tree 1 +Tabs 2 +Author +Input Field +Hover 1 +Navbar +Modern Navbar Design +About +Slider +Menu 1 +Image Hover Gallery +Glassmorphism Card Design +Todo 1 +Tabs 1 +Carousel 1 +Carousel 2 +Carousel 3 +Glassmorphism Login Page +
FAQ Section +Claymorphism Theme +Glass Theme +Neumorphism Theme +
Other +Author +Web Demo +
+
+ + + + \ No newline at end of file