TUTO Créer un site onepage avec un scroll animé en CSS sur Tuto.com

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

Un cours de

Promo -40% Jusqu'au 23 juillet, 00:00

1,79€2,99€

5,0

24m04

Intermédiaire

Fichiers sources

Téléchargement & visionnage illimité

Satisfait ou remboursé

Paiement 100% sécurisé

Présentation
Contenu

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

Leçon 2

Plan détaillé du cours

Leçon 1Créer et styliser les sections

13m12

Leçon 2Ajouter un menu fixe et le système de scroll animé

10m52

Avis des apprenants

Détail des avis

154

Apprenants

9

Commentaires

5/5

Note moyenne

5/5

9

4/5

0

3/5

0

2/5

0

1/5

0

Jean Berdier

Publié le 23/12/2023

c'est si bien expliqué .... comme à chaque fois. Merci

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

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.

Bundle

Retrouvez ce cours dans le bundle :

Promo -40%

Formateur

4,9

Voir ses cours

Prérequis

Intermédiaire

Accessibilité

Sous-titres disponibles

Ressources téléchargeables

Fichiers sources (1.83 Ko)

Catégories

Programmation CSS webdesign

Cours publié le 19/05/2020
Langue : Français
ID : 144231

Vos questions sur le cours

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

CSS 3

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.