Créer un site onepage avec un scroll animé en CSS
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
24m04
de formation
2
leçons vidéo
1
chapitre
Intermédiaire
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Créer un site onepage avec un scroll animé en CSS

4.8/5 Trustpilot (1391 avis) Satisfait ou remboursé
24m04
de formation
2
leçons vidéo
1
chapitre

Dans cette astuce CSS en vidéo, je vous propose de découvrir comment créer un site OnePage avec un scroll animé uniquement en CSS.

  • Nous aurons un menu qui restera fixe et qui nous permettra au clic sur un item d'animer le scroll jusqu'à la section souhaitée.
  • Nous ajouterons aussi une propriété CSS pour pouvoir "attirer" une section lorsque l'on est proche d'elle pour qu'elle soit toujours visible entièrement.

Je vous invite à regarder l'extrait vidéo pour vous rendre compte du résultat final.

Les sources sont bien évidemment fournies avec le tuto.

Bon tuto à tous !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Créer et styliser les sections
Leçon 2
Ajouter un menu fixe et le système de scroll animé

Table des matières

Leçon 1

Créer et styliser les sections

13m12
Leçon 2

Ajouter un menu fixe et le système de scroll animé

10m52

Avis des apprenants

Détail des avis
155
Apprenants
9
Commentaires
5/5
Note moyenne
5/5
9
4/5
0
3/5
0
2/5
0
1/5
0
Jean Berdier
Jean Berdier
Publié le 23/12/2023
c'est si bien expliqué .... comme à chaque fois. Merci
Valérie Arno
Valérie Arno
Publié le 01/04/2021
Un bon tuto comportant plusieurs détails CSS que je ne connaissais pas, très intéressant. Par contre pour le côté aimanté, il ne faut pas descendre trop sur la section (genre à moitié), juste un peu, sinon ça ne fonctionne pas. Et dans mon logiciel scroll-snap-type et scroll-snap-align s'écrivent en rouge, peut-être pas du CSS3 ? En tout cas je ne connaissais pas, comme bien d'autres détails de ce cours. Comme toujours, vos explications sont précises et votre débit de parole très agréable à suivre. A voir si l'utilisation sur des longues pages s'y prête. Merci pour ce partage de connaissances pratiques et faciles.
Membre-5709-6082
Membre-5709-6082
Publié le 08/02/2021
J'adore ce genre de tutoriels qui durent une vingtaine de minutes. C'est concis et on retient mieux les astuces. Merci beaucoup.

Vos questions sur le cours

Quel est le niveau requis pour suivre ce tuto ?

intermédiaire

Que contient le fichier source ?

Les fichiers de départ pour débuter le tuto en même temps que le formateur ainsi que les fichiers finaux pour s'y référer après le visionnage.

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
2,99€
Paiement unique, sans abonnement
Accès à vie à cette formation
24m04 de vidéo • 1 chapitre
Satisfait ou remboursé voir conditions
Accès immédiat après paiement
Avec l'abonnement
Pour progresser en continu
34,90€ /mois
Sans engagement
Cette formation + 6 769 autres en illimité
Plus de 20 nouvelles formations par mois
Résiliable en 1 clic, à tout moment
Commencer avec l’abonnement
Accès immédiat, pendant votre abonnement

Inclus dans les deux formules

  • Hors connexion via l'app Tuto.com
  • Salon d'entraide pour vos questions
  • Certificat de complétion
Paiement sécurisé 1,4 million d'apprenants 4.8/5 Trustpilot
Logo carte-bancaire-monoLogo visa-monoLogo mastercardLogo paypal-monoLogo klarna-monoLogo apple-pay-monoLogo google-pay-mono
Une question avant de choisir ? Écrivez-nous ou appelez le 01 84 80 80 29 (du lundi au vendredi, 10h-12h et 14h-16h)

Formations complémentaires

Les apprenants qui suivent cette formation s'intéressent aussi à :

Abonnement 34,90€/mois

Attendez ! 🤗

Accédez à plus de 1424 tutos gratuits

Notre politique de protection des données