Le défilement harmonieux, une approche privilégiée dans le développement web, a pour vocation d’offrir une navigation douce et fluide aux utilisateurs. Il sublime l’expérience de parcours des pages web, troquant les déplacements brusques contre des animations subtiles.
Ce guide exhaustif, spécialement conçu pour les développeurs web, vous dévoilera comment mettre en œuvre un défilement harmonieux grâce à JavaScript.
Un défilement harmonieux se caractérise par une transition en douceur vers la section souhaitée d’une page web, contrairement au déplacement instantané. Cela se traduit par une expérience de navigation plus plaisante et intuitive pour l’utilisateur.
Les atouts du défilement harmonieux
Le défilement harmonieux peut rehausser l’expérience utilisateur d’une page web de plusieurs manières :
- Il améliore l’esthétique visuelle en éliminant les sauts de défilement soudains et désordonnés, conférant ainsi une touche d’élégance.
- Il stimule l’engagement de l’utilisateur en proposant un défilement fluide et continu. Cela encourage l’utilisateur à explorer davantage le contenu de la page.
- Enfin, le défilement harmonieux simplifie la navigation, surtout lorsqu’il s’agit de pages web longues ou de déplacements entre différentes sections.
Pour instaurer un défilement harmonieux, il est possible de modifier le comportement de défilement par défaut via JavaScript.
Structure HTML
Pour commencer, il est nécessaire de structurer le balisage HTML pour organiser les différentes zones de contenu et la navigation permettant de passer de l’une à l’autre.
<!DOCTYPE html>
<html lang="en"><head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://wilku.top/a-guide-for-web-developers/./style.css" />
<title>Guide du défilement harmonieux pour développeurs web</title>
</head> <body>
<nav>
<ul>
<li><a href="#section1">Section 1</a></li>
<li><a href="#section2">Section 2</a></li>
<li><a href="#section3">Section 3</a></li>
</ul>
</nav>
<section id="section1">
<h2>Section 1</h2>
</section>
<section id="section2">
<h2>Section 2</h2>
</section>
<section id="section3">
<h2>Section 3</h2>
</section>
<script src="https://wilku.top/a-guide-for-web-developers/./script.js"></script>
</body></html>
Ce fragment HTML se compose d’une barre de navigation contenant trois liens d’ancrage. L’attribut ‘href’ de chaque ancre pointe vers l’identifiant unique de la section ciblée (par exemple, section1, section2, section3). Ainsi, chaque clic sur un lien redirigera vers l’élément correspondant.
Style CSS
Ensuite, appliquez du style CSS pour embellir et structurer la page. Ajoutez le code suivant au fichier ‘style.css’ :
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
nav {
background: #fff;
box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.25);
position: sticky;
top: 0;
padding: 30px;
}
nav ul {
display: flex;
gap: 10px;
justify-content: center;
}
nav ul li {
list-style: none;
}
nav ul li a {
border-radius: 5px;
border: 1.5px solid #909090;
text-decoration: none;
color: #333;
padding: 10px 20px;
}
section {
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
Ce code présentera les liens sous forme de boutons en ligne et chaque section occupera toute la hauteur de l’écran. Cependant, vous remarquerez que cliquer sur un lien fait basculer instantanément le navigateur vers la section correspondante, sans animation.
Implémentation JavaScript
Pour ajouter une animation fluide lors d’un clic sur un lien d’ancrage, vous pouvez utiliser la méthode `scrollIntoView()`. Cette méthode JavaScript, intégrée à la classe `Element`, permet de faire défiler un élément jusqu’à ce qu’il soit visible dans la fenêtre du navigateur.
Lorsque vous invoquez cette méthode, le navigateur ajuste la position de défilement du conteneur de l’élément (comme la fenêtre ou un conteneur déroulant) de manière à rendre l’élément visible.
Ajoutez votre code JavaScript dans le fichier ‘script.js’. Commencez par écouter l’événement `DOMContentLoaded` avant toute autre manipulation. Cela garantit que votre code ne sera exécuté que lorsque le DOM est entièrement chargé et prêt à être utilisé.
document.addEventListener("DOMContentLoaded", makeLinksSmooth); Ensuite, définissez la fonction `makeLinksSmooth()`. Commencez par sélectionner tous les liens d’ancrage présents dans la navigation, car leur comportement sera modifié. Parcourez ensuite chaque lien et ajoutez un écouteur d’événement pour l’événement de clic.
function makeLinksSmooth() {
const navLinks = document.querySelectorAll("nav a");
navLinks.forEach((link) => {
link.addEventListener("click", smoothScroll);
});
}Enfin, définissez la fonction `smoothScroll()`, qui prend en paramètre un objet d’écouteur d’événements. Utilisez la méthode `preventDefault()` pour éviter que le navigateur n’exécute son action par défaut lors d’un clic sur un lien. Le code suivant prendra le relais.
Récupérez la valeur de l’attribut ‘href’ du lien d’ancrage courant et enregistrez-la dans une variable. Cette valeur devrait correspondre à l’ID de la section ciblée, avec le préfixe ‘#’. Utilisez-la pour sélectionner l’élément de la section via `querySelector()`. Si un élément cible est trouvé, appelez sa méthode `scrollIntoView` et passez-lui le paramètre `behavior: ‘smooth’` dans un objet pour finaliser l’effet.
function smoothScroll(e) {
e.preventDefault();
const targetId = this.getAttribute("href");
const targetElement = document.querySelector(targetId);
if (targetElement) {
targetElement.scrollIntoView({ behavior: "smooth", });
}
}Ainsi, votre page web finie défilera en douceur vers chaque section lorsque vous cliquerez sur un lien.
Pour affiner davantage l’expérience de défilement harmonieux, vous pouvez optimiser certains aspects.
Réglage de la position de défilement
Vous pouvez ajuster la position verticale du défilement à l’aide de la propriété `block` de l’argument des paramètres. Utilisez des valeurs telles que ‘start’, ‘center’ ou ‘end’ pour définir quelle partie de l’élément cible doit être amenée dans le champ de vision :
targetElement.scrollIntoView({ behavior: "smooth", block: "end" });
Ajout d’effets d’accélération
Intégrez des effets d’accélération à l’animation de défilement pour créer une transition plus naturelle et attrayante visuellement. Les fonctions d’accélération, comme les courbes d’accélération progressive, d’accélération ou les courbes de Bézier cubiques personnalisées, peuvent réguler l’accélération et la décélération du mouvement de défilement. Vous pouvez utiliser une fonction de temporisation personnalisée avec la propriété CSS `scroll-behavior` ou une bibliothèque JavaScript telle que ‘smooth-scroll’ pour obtenir le même résultat.
html {
scroll-behavior: smooth;
scroll-behavior: cubic-bezier(0.42, 0, 0.58, 1);
}
Assurez-vous que votre implémentation du défilement harmonieux fonctionne de manière cohérente sur différents navigateurs. Testez et gérez toutes les singularités ou incohérences spécifiques à certains navigateurs qui pourraient survenir.
Vous pouvez utiliser un site web comme Can I use pour vérifier la compatibilité navigateur lors de la construction. Envisagez d’utiliser une bibliothèque JavaScript ou un polyfill pour garantir la compatibilité entre les navigateurs et offrir une expérience fluide à tous les utilisateurs.
Le défilement harmonieux apporte une touche d’élégance et améliore l’expérience utilisateur en créant un effet de défilement doux et agréable à l’œil. En suivant les étapes décrites dans ce guide, les développeurs web peuvent instaurer un défilement harmonieux grâce à JavaScript.
Le réglage précis du comportement de défilement, l’intégration d’effets d’accélération et la garantie de la compatibilité entre les navigateurs rehausseront encore davantage l’expérience de défilement harmonieux, rendant vos pages web plus attrayantes et agréables à parcourir.