Apprendre à faire une animation type scroll-snapping

Contrairement au défilement classique, qui s’arrête librement en fonction de l’inertie du mouvement, le scroll-snapping force l’arrêt du défilement sur des points prédéfinis, offrant ainsi une expérience plus fluide et structurée.

Pourquoi faire du scroll-snapping ?

Le scroll-snapping permet d’améliorer l’expérience utilisateur en rendant le défilement plus fluide et maîtrisé. En alignant automatiquement les sections d’une page lorsqu’on fait défiler, on guide le lecteur dans un parcours plus structuré, presque comme une présentation. C’est particulièrement utile pour les sites modernes à sections bien définies, comme les portfolios, les pages produit ou les articles interactifs.

Comprendre le scroll-snapping en CSS

1.1. Les propriétés principales

1. Le scroll-snap-type

Cette propriété s’applique au conteneur parent et définit la « direction et le type de scroll-snapping :

.container {
  scroll-snap-type: x mandatory; /* Défilement horizontal strict */
  overflow-x: scroll;
  display: flex;
  gap: 10px;
  width: 100%;
  scroll-padding: 10px; /* Ajoute un espace avant le premier élément */
}

• x → le défilement s’applique horizontalement.
• y → le défilement fonctionne verticalement.
• both → le défilement peut s’appliquer dans les deux directions.
• mandatory → impose un arrêt strict à chaque point de snap.
• proximity → permet un arrêt souple si l’utilisateur ralentit son défilement près d’un point de snap.

2. Le scroll-snap-align

Cette propriété s’applique aux éléments enfants du conteneur et détermine comment ils s’alignent lorsqu’ils atteignent un point de snap.

.item {
  scroll-snap-align: center; /* Centre chaque élément dans le viewport */
  flex: 0 0 80%; /* Taille relative pour l'effet de carrousel */
  background: lightblue;
  padding: 20px;
  border-radius: 10px;
}

Valeurs possibles :

• start → l’élément s’aligne au début du conteneur.
• center → l’élément s’aligne au centre du conteneur.
• end → l’élément s’aligne à la fin du conteneur.

3. Le scroll-snap-stop

Cette propriété permet de forcer l’arrêt du scroll sur un élément, même en cas de défilement rapide.

.item {
  scroll-snap-stop: always; /* Oblige le défilement à s’arrêter sur cet élément */
}

Valeurs possibles :

• normal → le scroll snapping fonctionne normalement (valeur par défaut).
• always → oblige l’arrêt sur l’élément même si l’utilisateur fait défiler rapidement.

A voir : Les tooltips une solution simple pour l’ergonomie de ton site

1.2. Différences entre mandatory et proximity

La différence entre mandatory et proximity concerne la rigidité du comportement.

• Avec mandatory, le défilement s’arrête strictement aux points définis, utile pour un carrousel ou une navigation forcée.
• Avec proximity, le défilement est plus fluide et ne s’arrête que si l’utilisateur ralentit à proximité d’un point de snap.

Exemple avec mandatory (défilement strict)

.container {
  scroll-snap-type: x mandatory;
  overflow-x: scroll;
  display: flex;
  width: 100%;
}

Exemple avec proximity (défilement plus fluide)

.container {
  scroll-snap-type: x proximity;
  overflow-x: scroll;
  display: flex;
  width: 100%;
}

Démo visuelle :

• mandatory → l’utilisateur ne peut s’arrêter qu’aux points définis.
• proximity → l’utilisateur peut s’arrêter entre les points de snap s’il défile rapidement.

2. Implémentation du scroll-snapping dans une page web

2.2. Mise en place d’un scroll-snapping vertical pour une landing page

Pour commencer, on vient créer une structure HTML de base :

<div class="container-scroll-snap">
<div class="scroll-snap-child">
<p>scroll-snap-1</p>
</div>
<div class="scroll-snap-child">
<p>scroll-snap-2</p>
</div>
<div class="scroll-snap-child">
<p>scroll-snap-3</p>
</div>
</div>

La classe container-scroll-snap va venir contenir les éléments enfants dans la classe scroll-snap-child.On y rajoute le CSS:

.container-scroll-snap
{
width: 100vw;
height: 100vh;
scroll-snap-type:y mandatory;
overflow-x:auto;
}
.scroll-snap-child
{
scroll-snap-align:center;
height:100vh;
width:100vw;
border:1px black solid;
display:flex;
justify-content:center;
align-items:center;
}
.scroll-snap-child p{
color: #fff;
text-shadow:2px 2px 1px black;
font-size:1.2rem;
text-transform:uppercase;
font-weight:600;
}

Observez le résultat, à présent quand vous scrollez le contenu se déplace par bloc.Entrainez-vous à parti de ce CodePen:

A voir : Comment faire des tableaux en HTML

Conclusion 

Le scroll-snap est une technique assez simple pour améliorer l’expérience de vos utilisateurs. Perso, cela évite d’utiliser des bibliothèques en JavaScript qui peuvent ralentir votre site.