article(s) dans votre panier VOIR

Faire une page en parallaxe avec le framework Materialize CSS

  • Vidéo 11 sur 20
  • 2h22 de formation
  • 20 leçons

Un contenu flash devrait s'afficher ici. Votre navigateur ne comporte pas de plugin flash, ou il ne s'est pas correctement initialisé.

Vous pouvez télécharger le plugin flash depuis le site d'Adobe à l'adresse suivante : http://get.adobe.com/flashplayer/.

Pour accéder à la suite de cette formation, vous devez vous abonner.
previous
summary
resume
next
play
Une page en parallaxe
00:00 / 13:07
HD
fullscreen
Je m’abonne
à partir de 16,6 € / mois
  • Visionnage en ligne
  • Accès illimité à toutes nos formations
OU
J'achète uniquement
la formation
39,90€
  • Téléchargement + VOD à vie
  • Accès uniquement à cette formation

Détails de la formation

Dans ce tuto, l’expert vous apprend à maitriser le Framework Material Design Materialize CSS en créant une page en parallaxe. L’objectif de ce cours consiste à créer des mouvements d’élément avec des vitesses différentes à celui du premier plan. Pour ce faire, vous créer trois sections à partir de la balise . Sur chaque section vous affectez la classe parallax-container. Dans une de ces sections vous créez des Div pour contenir des images et vous utilisez la balise . Dans une autre section, vous mettez un texte au hasard. Pour que l’effet soit bien visible le texte doit avoir une longueur importante. Avant de faire une prévisualisation, vous faites une initiation en JavaScript du parallax. Pour cela, vous faites le code $(« .parallax »).parallax() ;. Ce code permet de faire un appel à la fonction Parallaxe. Pour mettre un titre dans l’image de fond, vous allez sur la section qui contient l’image et vous saisissez le code personnalisé après la balise section. Pour cela, vous créez un container pour accueillir le texte et vous pouvez ajouter la classe wrampper pour aligner le texte verticalement. Pour placer le texte, vous créez une autre Div avec la couleur du texte de votre choix et vous mettez le titre dans une balise . Pour conclure, vous savez maintenant comment ranger du texte par rapport à l’arrière-plan.