Implémentation d'un défilement fluide pour une meilleure expérience utilisateur.

Le défilement fluide est une fonctionnalité de micro-animation moderne qui améliore l'expérience utilisateur en permettant une navigation facile entre les sections d'une page. Au lieu de passer instantanément aux sections, un défilement fluide crée une transition fluide et engageante. C'est un excellent moyen de maintenir l'engagement des utilisateurs sans les submerger de sauts brusques.

Dans cet article, nous explorerons deux façons de mettre en œuvre un défilement fluide :

• Utiliser CSS
• Utiliser JavaScript

Commençons par utiliser CSS pour un défilement fluide.

Pourquoi CSS pour un défilement fluide ?

CSS est la méthode la plus simple et la plus préférée pour obtenir un défilement fluide. Il est efficace pour les performances des pages puisqu'aucun JavaScript supplémentaire n'est chargé, ce qui le rend plus rapide et plus léger. Allons de l'avant et mettons en œuvre cela dans notre projet.

Étape 1 : Création de la barre de navigation

Tout d'abord, créons une barre de navigation simple qui contient nos liens de navigation. Ces liens dirigeront les utilisateurs vers des sections spécifiques de la page.

Assurez-vous que les liens de navigation sont des balises d'ancrage, car ils nous permettent d'accéder facilement à des sections spécifiques de la page.

Étape 2 : Création de sections
Maintenant que nous avons nos liens de navigation, créons les sections correspondantes.

Nous avons créé des sections pour chaque lien de navigation.

Étape 3 : Ajout de contenu défilant
Pour que le défilement fluide fonctionne, votre page a besoin de suffisamment de contenu pour défiler. Ajoutons un texte factice pour rendre la page défilante.

Enfin, nous avons suffisamment de contenu pour rendre notre page déroulante.

Étape 4 : Lier la navigation aux sections
Nous utiliserons l'attribut href de la balise d'ancrage pour référencer les sections vers lesquelles nous voulons faire défiler. Ajoutez simplement un # suivi de l'ID de section correspondant.

Donc, ce que nous faisons essentiellement à partir de l'image ci-dessus, c'est d'utiliser l'attribut href pour référencer la section vers laquelle nous voulons que nos liens de navigation accèdent.

Étape 5 : Attribuez l'identifiant(id) approprié à la section appropriée

Donc, ce que nous avons fait maintenant, c'est simplement d'attribuer chaque lien à sa section appropriée avec l'attribut href et les identifiants. Par conséquent, le lien de navigation avec un href de #section-one correspondrait à une section d'id section-one

Maintenant, lorsque nous cliquons sur le lien de navigation, nous sommes redirigés vers la section.
Mais il y a quelque chose que nous avons remarqué, ce n'est pas fluide, la page passe à la section ce qui n'est pas une super expérience.

Étape 6 : Ajout d'un défilement fluide avec CSS
Pour activer un défilement fluide, ajoutez une seule propriété CSS à l'élément html.

Lorsque nous ajoutons la propriété scroll-behaviour à notre code HTML, nous pouvons être témoins de l'effet de défilement fluide lorsque l'on clique sur notre lien de navigation.

Comment ça marche

Sous le capot, l'attribut href dans la balise d'ancrage est traditionnellement utilisé pour la navigation vers des pages ou des URL externes. Cependant, lorsqu'elle est associée à un # suivi d'un identifiant de section, la balise d'ancrage « regarde » dans la page actuelle et défile jusqu'à la section correspondante. En ajoutant le scroll-behavior: smooth; Propriété CSS, nous créons une transition fluide entre les sections, améliorant ainsi l'expérience utilisateur globale.

L'autre façon d'obtenir un défilement fluide consiste à utiliser JAVASCRIPT pour le gérer.
Nous pouvons également y parvenir en quelques étapes seulement :

NB : Chaque section aurait toujours l'identifiant attribué comme avant.

Étape 1 : Créer une fonction scrollIntoView

Nous pouvons créer une fonction en javascript qui utiliserait la méthode scrollIntoView pour obtenir le même résultat. Comme ça :

Étape 2 : Intégrer la fonction lorsque le lien est cliqué

nous intégrerons la fonction scrollIntoView dans l'écouteur d'événement attaché à chaque lien de navigation. De cette façon, lorsque vous cliquez sur un lien, la page défile en douceur jusqu'à la section référencée.

Cela peut également être refactorisé en fonction du framework que vous utilisez pour le développement.

Il s'agit de deux façons simples d'obtenir un défilement fluide lors de la création de pages Web intuitives.

Laissez un commentaire si vous avez une question ou un retour.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!