CATALOGUE Code & Data Formation XHTML/CSS Maîtriser Materialize CSS - Le framework pour le Material Design Comment utiliser Materialize CSS pour créer des pages en parallax

Comment utiliser Materialize CSS pour créer des pages en parallax

Une page en parallaxe
Vidéo non disponible ! Réessayez plus tard
Cette vidéo fait partie de la formation
Maîtriser Materialize CSS - Le framework pour le Material Design
Revoir le teaser Je m'abonne
Transcription
Cette leçon fait partie de la formation
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm
DescriptionProgrammeAvis
Cette leçon fait partie de la formation
49,90€ Je commande
Formation incluse dans l'abonnement Elephorm Je m'abonne à Elephorm

Configurons notre première page en parallax

Objectifs

Les objectifs de cette vidéo sont de :
- Comprendre le fonctionnement de l'effet parallax avec Materialize CSS.
- Apprendre à configurer une page en parallax.
- Savoir initialiser des éléments parallax via JavaScript.
- Maîtriser la personnalisation de l'effet parallax pour un rendu professionnel.

Résumé

Apprenez à utiliser Materialize CSS pour créer des pages avec un effet parallax en un minimum de configuration grâce à ce tutoriel complet.

Description

Dans cette leçon, nous explorerons la création de pages web utilisant l'effet parallax avec Materialize CSS. Vous découvrirez comment en seulement quelques étapes simples, il est possible de mettre en place des sections avec cet effet visuel. Nous commencerons par configurer notre page de base, en ajoutant les classes nécessaires pour activer l'effet parallax. Nous verrons comment initialiser le parallax en JavaScript et ajuster les éléments de texte et de style pour un rendu optimal. Enfin, vous apprendrez à personnaliser votre design en ajoutant des titres et du contenu au sein même de vos sections parallax. Cette leçon est idéale pour les développeurs souhaitant enrichir leurs pages avec des éléments visuels attrayants sans complexité excessive.

Voir plus

Questions fréquentes

Quel est le rôle de la classe 'parallax-container' dans Materialize CSS ?
La classe 'parallax-container' englobe les éléments qui bénéficieront de l'effet parallax, permettant d'identifier quelles sections doivent appliquer cet effet.
Pourquoi la fonctionnalité parallax ne fonctionne-t-elle pas immédiatement après l'ajout des classes CSS ?
L'effet parallax dans Materialize CSS nécessite une initialisation via JavaScript pour fonctionner correctement. Cela permet d'activer l'effet visuel après le chargement de la page.
Comment centrer horizontalement et verticalement un texte dans une section parallax ?
Pour centrer un texte horizontalement et verticalement dans une section parallax, utilisez des classes comme 'valine-wrapper' pour l'alignement vertical et 'center-align' pour l'alignement horizontal.