Intégrer une Landing Page fluide animée au scroll
Problème de lecture
Cette vidéo ne semble pas disponible
00:00
00:00
Sous-titres non disponibles
1h11
de formation
9
leçons vidéo
1
chapitre
Débutant
niveau requis
Adrien Gazaix
Adrien Gazaix
Formateur certifié

Intégrer une Landing Page fluide animée au scroll

Promo -33%
4.8/5 Trustpilot (1399 avis) Satisfait ou remboursé
1h11
de formation
9
leçons vidéo
1
chapitre

Dans ce tuto HTML / CSS / Javascript en vidéo, nous allons voir ensemble comment intégrer une Landing Page fluide avec des animations au scroll : changement de direction, vitesses différentes...
La maquette est fournie dans les sources, mais si vous êtes intéressé, je vous apprends également dans ce tuto à créer cette landing page de A à Z sur Figma.

Nous obtiendrons une page web qui restera identique lors du redimensionnement de la fenêtre car toutes les tailles de polices seront définies avec une nouvelle unité (viewport) et non plus en pixels. Et tout cela sans utiliser les media queries.

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

Les fichiers sources contenant la maquette Figma, les fichiers de départ ainsi que les fichiers finaux sont inclus avec le tuto.
N'hésitez pas à me soumettre des questions dans le salon d'entraide si vous rencontrez des difficultés pendant ou après le visionnage de la vidéo.
Bon tuto !

Qu’allez-vous apprendre dans ce cours ?

Plan de cours
Leçon 1
Introduction & tour d'horizon de la maquette et des fichiers sources
Leçon 2
Poser la structure HTML de la page web
Leçon 3
Ajouter les propriétés CSS essentielles à toute la page
Leçon 4
Finaliser l'intégration CSS de la section 01
Leçon 5
Finaliser l'intégration CSS de la section 02
Leçon 6
Finaliser l'intégration CSS de la section 03
Leçon 7
Finaliser l'intégration CSS de la section 04

Table des matières

Leçon 1

Introduction & tour d'horizon de la maquette et des fichiers sources

04m31
Leçon 2

Poser la structure HTML de la page web

08m04
Leçon 3

Ajouter les propriétés CSS essentielles à toute la page

17m08
Leçon 4

Finaliser l'intégration CSS de la section 01

06m04
Leçon 5

Finaliser l'intégration CSS de la section 02

06m35
Leçon 6

Finaliser l'intégration CSS de la section 03

04m26
Leçon 7

Finaliser l'intégration CSS de la section 04

07m28
Leçon 8

Palier au problème de taille de police sur le texte courant

04m01
Leçon 9

Ajouter les animations au scroll & conclusion

13m10

Aperçus

Avis des apprenants

Détail des avis
7
Commentaires
5/5
Note moyenne
5/5
7
4/5
0
3/5
0
2/5
0
1/5
0
Membre-5711-9691
Membre-5711-9691
Publié le 14/09/2023
Merci pour ce tuto, un peu ardu, mais éclaire pas mal de choses
Eric Reynaud
Eric Reynaud
Publié le 19/03/2023
Salut Adrien ! J'adore ce tuto qui permet de voir une mise en ligne d'une maquette ! J'apprécie beaucoup ta pédagogie et je m'éclate à créer des projets perso. qui me viennent en tête grâce à tes conseils ! A très bientôt avec un plaisir immense. Eric.
Membre-5168-9404
Membre-5168-9404
Publié le 08/12/2022
Tutoriel très pédagogique !
Adrien Gazaix
Adrien Gazaix
Super merci a toi !

Vos questions sur le cours

Que contient le fichier source ?

La maquette Figma, les fichiers de départ pour faire l'intégration en même temps que le formateur, et bien sur le résultat final du tuto.

Quel est le niveau requis pour suivre ce tuto ?

débutant

Deux façons de suivre cette formation

À l'unité
Pour vous former sur ce sujet précis
11,99€ 8€
Promo -33%
Paiement unique, sans abonnement
Accès à vie à cette formation
1h11 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 793 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 1427 tutos gratuits

Notre politique de protection des données