3,00

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

3,00

  • Une formation vidéo de 24m04s
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Créer un site onepage avec un scroll animé en CSS

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation CSS (durée : 24m04s)

    • Créer et styliser les sections 00:13:12
    • Ajouter un menu fixe et le système de scroll animé 00:10:52



Formateur : Adrien Gazaix

Adrien Gazaix a publié 130 tutoriels et obtenu une note moyenne de 4,8/5 sur 51 635 tutoriels vendus. Adrien Gazaix est un formateur certifié tuto.com. Voir les autres formations de Adrien Gazaix

5,0
note moyenne

8
avis laissés
5 étoiles
8
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de valerie-a77 laissé 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.

  • 5
    avis de membre-5709-6082 laissé 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.

  • 5
    avis de pthouvenot laissé le 15/07/2020
    Merci pour le tuto .

  • 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.
Parcours Developpeur Front End
accédez à plus de 1306 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données