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
Related posts
Every brand has a surface hierarchy and most companies invest in the wrong one first.
Here's what I mean:
Your brand lives on surfaces such as awebsite, pitch deck, social profiles, sales collateral, product UI, email templates.
Every one of these is a moment where someone decides whether to trust you or move on, but they're not equal and there's an order of operations.
Your website is Surface #1. It's where 80% of your prospects form their first real impression, before the demo, before the deck and before anyone on your team gets to explain anything.
If your site doesn't close the credibility gap, nothing downstream can fix it.
Surface #2 is your pitch deck and It inherits the expectations the website set. If the site looked like a Series A startup, the deck is fighting uphill no matter how good the content is.
Surface #3 is everything else like social, collateral, email signatures, conference booths. These reinforce. They don't establish.
The mistake I see constantly: companies spend $50K on a brand identity system, deliver a beautiful guidelines PDF, and then launch with the same outdated website they had before.
The brand exists in a document and it doesn't exist in the world.
A brand system isn't done when the guidelines are done. It's done when your #1 surface reflects the full system.
Everything else follows from there.
Hi daniel, i'm taking seriously posting here, any advise, just starting. I have 1700 on X so i want to replicate
Iām back with another design question for this podcastĀ rentalĀ studio site Iām working on. In my last post, I shared two hero section options for the homepage. If you were about to reserve a studio, which booking layout would feel clearer and make you more confident to click āBook Woodgrain Studioā and why?
12 voted
67%
6 voted
33%
18 votes
Closed
The copy is overwhelming tho
The whole layout is crowded
There's always been a gap between what print designers do and what web designers are allowed to do. It mostly comes down to text. I have been completely obsessed with these beautiful Pretext demos, and have collected some of my favourites.
ICYMI: Pretext is a TypeScript library that measures and lays out text ~500x faster than browser reflow, no DOM involved. For graphic designers it means using text on the web with the same flexibility you get in print.
Have you explored Pretext yet? What are your favourite demos?
Trending
FLORA
Reusable workflows are replacing one-off prompts in creative AI. Share what you're building in FLORA.
portfolioreview
The best portfolios tell a story, not just show a grid.Ā Share yours for feedback.
brandguidelines
Brand guidelines are becoming living systems. What are you building for your clients?
freelancerlife
Freelancer life is wins, pivots, and everything in between. Whatās yours right now?
aivideo
AI video tools are moving at warp speed. Which ones are you experimenting with?