5 Pure CSS2 with JSPublished 2026-10-05Free · no sign-up
Seven full-screen patterns: chapters that snap into place, a hero sized with dynamic viewport units, a full-bleed call to action band, a background video section with a pause button, section dots navigation, a split welcome screen and a footer that is uncovered as the page scrolls away.
Each section fills the scroll area and scrolling snaps to the next one, the presentation-style page, with scroll-snap-type: y mandatory on the container and scroll-snap-align: start on each section. Keyboard and screen reader users can still move through it normally.
100vh on phones includes the space under the browser's address bar, so a full-height hero gets cut off. 100dvh follows the visible area as the bar shows and hides, and svh and lvh give the smallest and largest values. This hero uses min-height: 100dvh with a vh fallback.
View code
<section class="fps2"><h3>Room to breathe</h3><p>min-height: 100dvh keeps this hero exactly one screen tall on phones.</p><a href="#more">Scroll down</a></section>
A bold band that ends a long page with one question and one button. It breaks out of a narrow content column to the full width with negative margins calculated from the viewport, so the content above can stay at a readable width.
View code
<div class="fps3"><div class="col"><p>Content column</p></div><section class="band"><h3>Ready to start?</h3><a href="#signup">Create a free account</a></section></div>
A full-bleed section with a looping background video, muted and playsinline so it can autoplay on phones. A Pause button is included because autoplaying motion must be stoppable, and the poster colour shows if the video cannot play. A gradient stands in for the video here.
View code
<section class="fps4"><div class="vid" aria-hidden="true"></div><div class="tx"><h3>Made by the sea</h3><button aria-pressed="false">Pause background</button></div></section>
var s = document.querySelector('.fps4'), b = s.querySelector('button');
b.onclick = function () { var p = s.classList.toggle('paused'); b.setAttribute('aria-pressed', p); b.textContent = p ? 'Play background' : 'Pause background'; };
05. Section Dots Navigation
Full pageNavigation
Full-height sections with a column of dots on the side, one per section, that show where you are and jump to a section when clicked. The dots are links named after their sections, and an IntersectionObserver keeps aria-current on the visible one.
var sc = document.querySelector('.fps5 .sc'), links = document.querySelectorAll('.fps5 nav a');
var io = new IntersectionObserver(function (es) { es.forEach(function (e) { if (e.isIntersecting) links.forEach(function (l) { if (l.getAttribute('href') === '#' + e.target.id) l.setAttribute('aria-current', 'true'); else l.removeAttribute('aria-current'); }); }); }, { root: sc, threshold: .6 });
sc.querySelectorAll('section').forEach(function (s) { io.observe(s); });
links.forEach(function (l) { l.onclick = function (e) { e.preventDefault(); sc.querySelector(l.getAttribute('href')).scrollIntoView({ behavior: 'smooth' }); }; });
06. Full-Height Split Welcome
Full pageSplit
A welcome screen split into a message half and an action half, both at least the full height of the view. On small containers the halves stack and each takes its natural height, because forcing two full screens on a phone wastes a whole scroll.
View code
<section class="fps6"><div class="in"><div class="a"><h3>Welcome back</h3><p>Pick up where you left off.</p></div><div class="b"><a href="#continue">Continue editing</a><a href="#new">Start something new</a></div></div></section>
The page content slides up to uncover a footer that seems to sit underneath it, a curtain effect. The footer is position: sticky at the bottom of the scroll area and the content above has a higher stacking order and its own background.
View code
<div class="fps7" tabindex="0" role="region" aria-label="Page, scroll"><main><h3>Page content</h3><p>Scroll to the end to uncover the footer.</p><p>More content.</p><p>Almost there.</p></main><footer><b>Studio Fern</b><span>hello@example.com</span></footer></div>
On mobile, 100vh includes the area behind the address bar, so full-height sections get cut off. 100dvh follows the visible area; keep a 100vh line before it as a fallback.
Snap gently
scroll-snap-type: y mandatory makes each section land neatly, but sections taller than the screen become hard to read. Use proximity or avoid snapping when content length varies.
Autoplaying video needs a pause
Background video must be muted, playsinline and stoppable. A visible Pause button satisfies WCAG and helps people on slow connections.
Navigation that tracks position
Dots or progress navigation should be real links with names, mark the current one with aria-current, and keep working with the keyboard.
Frequently asked questions
Are full-page sections good for SEO?
They are fine as long as the content is real HTML text, not only images or video.
Should every section be full height?
No. Use full height for heroes and key moments; let ordinary content take its natural height.
How do I stop sections looking empty on wide screens?
Limit the content width with max-width and centre it.