One page CSS Scroll Snap
Code :
HTML
<main>
<div class="demo-nav">
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#propos">A propos</a></li>
<li><a href="#services">Services</a></li>
<li><a href="#contact">Contact</a></li>
</ul>
</div>
<div class="section section-1" id="accueil">
<h2>Accueil</h2>
</div>
<div class="section section-2" id="propos">
<h2>A propos</h2>
</div>
<div class="section section-3" id="services">
<h2>Services</h2>
</div>
<div class="section section-4" id="contact">
<h2>Contact</h2>
</div>
CSS
*{box-sizing: border-box}
body{
margin: 0;
color: #111;
}
main{
height: 100vh;
overflow-y: auto;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;
-webkit-overflow-scrolling: touch;
}
.demo-nav{
position:fixed;
top: 0;
z-index: 1;
left:0;
right:0;
}
.demo-nav ul {
margin: 0;
padding: 0;
list-style-type: none;
display: flex;
width: 100%;
justify-content: center;
}
.demo-nav li {
padding: 1rem;
}
.demo-nav a {
display:grid;
font-size:1.25rem;
text-decoration: none;
color:currentColor;
row-gap: 100%;
overflow: hidden;
transition: row-gap .4s;
grid-template-rows: 1fr 4px;
}
.demo-nav ul li a::after {
content: '';
height: 50%;
background-color: currentcolor;
}
.demo-nav ul li a:hover {
row-gap: 0;
}
.section {
display:grid;
place-items:center;
height: 100vh;
background-color: #70ebcf;
scroll-snap-align: start;
}
h2 {
text-transform: uppercase;
font-size: 2rem;
}
.section-1 {
background:#e67c7c
}
.section-2 {
background:#8d8dea
}
.section-3 {
background:#f2f268
}
.section-4 {
background:#9ceda2
}
Support navigateurs :
Vous rencontrez un problÚme avec cette démonstration ?
Avant de vous arracher les cheveux ou de crier au scandale, procĂ©dez Ă quelques simples vĂ©rifications. Si la dĂ©monstration fonctionne ici, il n'y a aucune raison pour qu'il n'en soit pas de mĂȘme chez vous. De plus vous pouvez tĂ©lĂ©charger la dĂ©monstration. Si vraiment vous coincez, vous pouvez me contacter par mail (contact@guyom-design.com) et je vous aiderai si je le peux. Je ne rĂ©ponds qu'aux messages respectueux.