8,00 au lieu de 12,00

Tuto Intégrer une Landing Page fluide animée au scroll avec CSS, HTML, JavaScript opération spéciale -33% jusqu'au 09 octobre, 13:00

8,00 au lieu de 12,00

  • Une formation vidéo de 1h11m
  • Téléchargement immédiat et visionnage illimité à vie
  • Satisfait ou remboursé
  • Fichiers sources inclus
  • Découvrez pourquoi vous former avec Tuto.com
Intégrer une Landing Page fluide animée au scroll

ajouter ce cours aux favoris retirer ce cours des favoris

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 !

Table des matières de cette formation CSS, HTML, JavaScript (durée : 1h11m)

    • Introduction & tour d'horizon de la maquette et des fichiers sources 00:04:31
    • Poser la structure HTML de la page web 00:08:04
    • Ajouter les propriétés CSS essentielles à toute la page 00:17:08
    • Finaliser l'intégration CSS de la section 01 00:06:04
    • Finaliser l'intégration CSS de la section 02 00:06:35
    • Finaliser l'intégration CSS de la section 03 00:04:26
    • Finaliser l'intégration CSS de la section 04 00:07:28
    • Palier au problème de taille de police sur le texte courant 00:04:01
    • Ajouter les animations au scroll & conclusion 00:13:10



Formateur : Adrien Gazaix

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

5,0
note moyenne

4
avis laissés
5 étoiles
4
4 étoiles
0
3 étoiles
0
2 étoiles
0
1 étoile
0
  • 5
    avis de heidisa83 laissé le 25/05/2022
    Excellent tuto !!! Diction fluide, ni trop lente ni trop rapide (c'est important mine de rien !!). J'y ai appris des choses, notamment concernant la librairie JS et le coté responsive de la page. J'aurais bien aimé voir le résultat dans les outils dev notamment en mode mobile. Mais bon j'ai juste suivi ce tuto sans coder, je vérifierai plus tard. Avis très positif en ce qui me concerne. Merci beaucoup !!!
    "Merci merci pour ce super commentaire 😉"

  • 5
    avis de darkwolf74000 laissé le 28/03/2022
    Bravo pour votre tuto ! C'est très clair et très agréable à suivre.
    "Et merci très content que ça vous ai plu :)"

  • 5
    avis de sylvainrey75 laissé le 22/03/2022
    Bonne tuto pour creer une animation simple

  • Avec quelles versions de logiciels ce tuto est-il compatible ?
    HTML 5, CSS 3
  • 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
Parcours Developpeur Front End
accédez à plus de 1435 tuto gratuits


non, je ne veux pas me former gratuitement

voir notre politique de protection des données