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
Promo -40% Jusqu'au 23 juillet, 00:00
5,94€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
29
Apprenants
4
Commentaires
5/5
Note moyenne
5/5
4
4/5
0
3/5
0
2/5
0
1/5
0
Valérie Arno
Valérie Arno
Publié le 09/05/2025
Encore un tuto agréable. Perso je n'aurai pas su faire ça. Je suis nulle dès qu'il faut calculer. :-) J'aime bien l'idée de la barre de nav en plus. C'est vrai qu'on a souvent un entête, une nav ou d'autres choses au-dessus. Merci beaucoup Carl pour cette nouveauté. A bientôt.
Carl Brison
Carl Brison
Avec plaisir, Valérie. Merci beaucoup pour votre commentaire très gentil ;-)
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.

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 : 5,94 €
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 1474 tutos gratuits

Notre politique de protection des données