The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Back to feedPost
🌟 Reveal the Next Section on Scroll - CSS Only!
Ever wanted that smooth full-screen scroll effect where each section reveals the next one underneath as you move down the page? The best part: no JavaScript, no complex animations - just pure CSS.
1. Set each section to full screen
Give every section a height of 100vh so it fills the entire viewport.
2. Make sections relative
3. Control the stacking order
Assign Z-index values from highest (top section) to lowest (bottom section) so sections stack on top of each other.
4. Use contrasting backgrounds - reveal effect becomes obvious as you scroll.
As the page scrolls, the top section moves away and naturally reveals the section underneath.
✨ Perfect for: Portfolio storytelling, Landing pages, Product showcases
#WebDesign #CSS #Webflow #FrontendDevelopment #UIDesign #WebDevelopment
The network for creativity
Join 1.25M professional creatives like you
Connect with clients, get discovered, and run your business 100% commission-free
Creatives on Contra have earned over $150M and we are just getting started
Challenges
View all
Related posts
Love this concept 🧡
A little interactive experiment for Verdant 🌱
Writing unique code for animations makes iterating on reactive micro-interactions so much smoother. It completely transforms how a brand narrative feels in the browser.
Great job
HOW MUCH GUIDANCE DOES A PASSWORD FIELD NEED?
For this desktop sign-up screen, I explored two ways to guide users while creating a password:
A - Detailed. A checklist displays every requirement and updates as the user types.
B - Minimal. A strength indicator provides quick feedback while keeping the interface cleaner.
The checklist offers more clarity, while the strength bar reduces visual noise.
Which approach would you choose - A or B?
39 voted
66%
20 voted
34%
59 votes
Closed
Detailed layout entails a guide to help users create strong passwords. Not everyone is good at crafting passwords, and this approach can makes them find it easy to remember.
