CATALOGUE Design et Infographie Formation WebDesign UX / UI Apprendre à Prototyper - Sites Internet et application

Mise en Place d'un Système d'Encre avec Scroll Automatique

Retour à la formation
Chapitre 4 Leçon 10
Précédent
Suivant

Apprenez à mettre en place un système d'encre dans votre page, permettant un scroll automatique en cliquant sur des éléments.

Détails de la leçon

Description de la leçon

Cette leçon vous guide à travers la configuration d'un système d'encre sur votre page web. Vous apprendrez à créer des liens qui, lorsqu'ils sont cliqués, provoquent un scroll automatique vers des sections spécifiques de la page. Les étapes incluent la nomination des encres, la création des boutons, et la configuration des mouvements de scroll. Une attention particulière est accordée à l'animation du scroll pour garantir une transition fluide et agréable pour l'utilisateur.

Le tutoriel détaille également l'importance de rendre les ancres transparentes dans la version finale afin qu'elles ne soient pas visibles pour l'utilisateur. En suivant cette leçon, vous serez capable d'améliorer l'expérience utilisateur en facilitant la navigation sur vos pages web.

Objectifs de cette leçon

Les objectifs de cette vidéo sont de :

  • Configurer un système d'encre
  • Créer des boutons de navigation
  • Ajouter des animations de scroll pour une transition fluide

Prérequis pour cette leçon

Pour suivre cette vidéo, vous devez avoir des connaissances de base en HTML et JavaScript.

Métiers concernés

Ce sujet est particulièrement utile pour les webmasters, les développeurs front-end, et les designers UX/UI qui cherchent à améliorer la navigation sur leurs sites.

Alternatives et ressources

Comme alternatives, vous pouvez utiliser des frameworks tels que React ou Vue.js qui offrent des plugins pour gérer automatiquement les scrolls et les ancres.

Questions & Réponses

Nommer les encres est essentiel pour que les boutons de navigation puissent les identifier et les cibler correctement lors du scroll.
L'animation recommandée est easing out cubic car elle offre un mouvement d'accélération et de décélération, rendant le scroll plus fluide.
Après avoir configuré les encres et les boutons, il est important de rendre les zones des encres transparentes pour ne pas les afficher sur la version finale de la page.