Aller au contenu principal

Guillaume Duverger Développeur & graphiste - Blog

Accueil BlogDémonstrationsCSSLightbox/slideshow/slider...
Partagez cette démonstration : Partager sur Facebook Partager sur Twitter

One page CSS Scroll Snap

Dernière modification : août 2022



<body>

<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>




*{box-sizing: border-box}
	
body{

margin: 0;
color: #111;
	
}
	
html, body, .section {
  height: 100%;
}

html {
scroll-snap-type: y mandatory;
scroll-behavior: smooth;
}

.section {
  scroll-snap-align: start;
  scroll-snap-stop: always;
  -webkit-overflow-scrolling: touch;
  display: flex;
  align-items: center;
  justify-content: center;
}	
	

	

.demo-nav{
	
position:fixed;
top: 0;
z-index: 1;
left:0;
right:0;
 background:rgba(255, 255, 255, 0.52);
}
	
.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,
.demo-nav ul li a:focus-within {
	
row-gap: 0;
	
}

	


h2 {

text-transform: uppercase;
font-size: 2rem;
 

}

	
.section-1 {
background:#e67c7c
}
.section-2 {
background:#8d8dea
}
.section-3 {
background:#eaea67
}
	
.section-4 {
background:#9ceda2
}	
    



Vous rencontrez un problème avec cette démonstration ?

Vous avez constaté un oubli ou une erreur dans le code ? N'hésitez pas à me le signaler par mail (contact@guyom-design.com). Vous ne parvenez pas à faire fonctionner la démonstration ? Vous pouvez également me contacter et je vous aiderai si je le peux.