Créez un Défilement Vertical Dynamique en HTML, CSS et JS !
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles

TUTO Créez un Défilement Vertical Dynamique en HTML, CSS et JS !

Carl Brison
9,90€
Acheter maintenant, payer plus tard. En savoir plus

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Création d'un défilement vertical interactif en HTML, CSS et JavaScript

Dans ce tutoriel, nous allons apprendre à créer une interface fluide et dynamique permettant de faire défiler verticalement du contenu grâce à des boutons de navigation. L'objectif est de mettre en place une section affichant des informations sur différentes villes, avec un texte explicatif à gauche et une image correspondante à droite, le tout accompagné d'un effet de transition harmonieux.

Ce que nous allons voir :

✅ Structuration de la page avec HTML
✅ Mise en page et stylisation avec CSS
✅ Ajout d'interactions en JavaScript pour gérer le défilement

Le concept repose sur un système de navigation où l'utilisateur peut faire défiler les sections en cliquant sur un bouton "haut" ou "bas". Grâce à JavaScript, nous mettons à jour dynamiquement la position des éléments pour offrir une navigation fluide et agréable.
Que vous soyez débutant ou que vous souhaitiez approfondir vos connaissances en animation et interactivité web, ce tutoriel vous guidera pas à pas dans la mise en place de ce système !
Prêt à coder ? C'est parti ! 🚀
 

Autres épisodes similaires :

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Mise en place du HTML
Leçon 2
Couper l'écran en 2 zones
Leçon 3
Centrer la zone bouton sur l'écran
Leçon 4
Manipuler les contenus gauche et droite
Leçon 5
Dernier réglage CSS
Leçon 6
Compter le nombre de Div en JS
Leçon 7
Ecouter le Down

Plan détaillé du cours

Leçon 1Mise en place du HTML
07m06
Leçon 2Couper l'écran en 2 zones
05m34
Leçon 3Centrer la zone bouton sur l'écran
09m49
Leçon 4Manipuler les contenus gauche et droite
08m26
Leçon 5Dernier réglage CSS
04m26
Leçon 6Compter le nombre de Div en JS
05m08
Leçon 7Ecouter le Down
06m47
Leçon 8Correction du bug
04m06
Leçon 9Bloquer à la dernière Div
02m25
Leçon 10Ecouter le Up
02m51
Leçon 11Bonus: Créer une zone Nav
09m

Aperçus

Avis des apprenants

Détail des avis
10
Apprenants
3
Commentaires
5/5
Note moyenne
5/5
3
4/5
0
3/5
0
2/5
0
1/5
0
Jean-Claude Warg-Briers
Jean-Claude Warg-Briers
Publié le 14/03/2025
Sympa comme approche pour ce défilement vertical , bien expliqué et de manière claire et structuré. Didier
Carl Brison
Carl Brison
Merci beaucoup Didier, c'est très gentil ;-)
Ludovic Loudiere
Ludovic Loudiere
Publié le 11/03/2025
bien expliqué, par contre pour le bonus mettre la nav en fixe n'est pas top, mais cela se modifie, je pense qu'il aurait mieux fallu compléter le tuto avec la possibilité de modifier la hauteur des div ... Bravo.
Carl Brison
Carl Brison
Merci beaucoup pour votre commentaire. L'idée ici étant de ne pas brouiller le tuto. C'est juste une idée simple pour les gens qui peuvent se poser des questions. Après libre à vous de faire la nav de votre choix. Dernière petite précision, attention le height est callé sur des unités d'écran.
Alain Tardif
Alain Tardif
Publié le 10/03/2025
Merci Carl pour ce cours sur le défilement vertical dynamique ! La gestion du `margin-top` en JS pour synchroniser les blocs de contenu et d’image demande une vraie gymnastique mentale 🤯. Entre les calculs de hauteur et l’effet fluide, il fallait bien s’accrocher ! Heureusement, la navigation est intuitive et le rendu est ultra propre. Bref, défi relevé avec style ! Validé 100%.
Carl Brison
Carl Brison
Merci beaucoup Alain, pour votre commentaire très gentil

Vos questions sur le cours

Avec quelle version de logiciel ce tuto est-il compatible ?

CSS

Quel est le niveau requis pour suivre ce tuto ?

débutant

Que contient le fichier source ?

Le code source de ce tuto

Payer plus tard

Prix d'achat : 9,00 €
Pour payer plus tard, sélectionnez Klarna comme moyen de paiement lors du règlement.

Ajoutez des articles à votre panier

Sélectionnez Klarna lors du règlement

Recevez une autorisation

Payez dans 30 jours

Klarna : conditions d'utilisation du paiement différé.

Attendez ! 🤗

Accédez à plus de 1455 tutos gratuits

Notre politique de protection des données