La création de formes à l’aide de CSS dans la conception Web n’est en aucun cas un concept nouveau. En fait, la méthode classique de création de formes CSS a été largement éclipsée par d’autres solutions graphiques HTML comme Canvas et SVG. Cependant, les formes CSS (du moins les formes de base) sont beaucoup plus faciles à créer et peuvent encore jouer un rôle important dans la conception Web. De plus, lorsque vous ajoutez une animation de défilement à ces formes, un tout nouvel élément de conception peut apparaître.
Dans ce tutoriel, nous allons explorer comment créer et animer des formes CSS dans Divi. Une fois que vous aurez compris le concept de base de la création de quelques formes à l’aide des options intégrées de Divi, vous pourrez animer ces formes pour créer des designs uniques d’animation de défilement pour votre site Web. Vous serez surpris de tout ce que vous pouvez faire !
Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.
Cliquez sur le bouton Importer.
Dans la fenêtre contextuelle de portabilité, sélectionnez l’onglet d’importation et choisissez le fichier à télécharger depuis votre ordinateur.
Cliquez ensuite sur le bouton d’importation.
Une fois cela fait, la mise en page de la section sera disponible dans le Divi Builder.
Passons au tutoriel, voulez-vous ?
Ce dont vous avez besoin pour commencer
Pour commencer, vous devez effectuer les opérations suivantes :
- Si vous ne l’avez pas encore fait, installez et activez le thème Divi.
- Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page en front-end (visual builder).
- Choisissez l’option « Build From Scratch ».
Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.
Explorer comment créer des formes CSS avec animation dans Divi
La structure en lignes et en colonnes
Tout d’abord, ajoutez une rangée d’un tiers et deux tiers de colonne à la section.
Avant de faire quoi que ce soit d’autre, ouvrez les paramètres de la ligne et mettez à jour les éléments suivants :
- Largeur de la gouttière : 1
- Égalisation de la hauteur des colonnes : OUI
- Largeur : 95
- Largeur maximale : 900px
NOTE : Ces paramètres sont cruciaux pour la configuration de notre design. Par exemple, la structure de colonne un tiers deux tiers, combinée à une ligne dont la largeur maximale est de 900px sans aucune marge (largeur de gouttière 1), nous permet de savoir que la colonne de gauche aura exactement 300px de largeur. En outre, si je maintiens mon design dans cette colonne de 300px de large, je peux également être sûr qu’il sera beau sur les tablettes et les appareils mobiles.
Ajout de l’espaceur du module de séparation
Ensuite, ajoutez un séparateur pour créer l’espacement nécessaire pour la colonne qui contiendra nos formes CSS.
À ce stade, vous devez ouvrir la modale d’affichage des couches pour gérer les couches/modules à venir, qui se trouve dans le menu des paramètres de Divi Builder.
Ouvrez les paramètres du séparateur et mettez à jour la hauteur du séparateur comme suit :
- Afficher le séparateur : NON
- Hauteur : 150px
Puisque nos formes CSS seront positionnées de manière absolue, l’espacement réel de la zone de la colonne peut facilement être ajusté en ajustant la hauteur du séparateur. Personnellement, j’ai trouvé cela plus facile que d’essayer de manipuler la hauteur ou l’espacement de la colonne. De plus, cela vous permet de styliser le séparateur comme un élément de design supplémentaire (ou une forme). Pour l’instant, vous pouvez le considérer comme un canevas pour vos futurs modèles de formes CSS.
Création de la première forme CSS à l’aide des options de bordure
Pour créer notre forme CSS, nous allons utiliser un module de séparation. Techniquement, nous utilisons uniquement les bordures qui entourent le module, et non la zone du module. (Vous pouvez donc utiliser d’autres modules, comme des modules de texte ou de code).
Pour créer la forme CSS, dupliquez le module séparateur déjà créé précédemment.
Supprimez ensuite la hauteur et la largeur du module de séparation en leur attribuant la valeur 0px comme suit :
Pour la première forme, nous allons créer un triangle droit qui pointe vers le haut à droite. Pour ce faire, mettez à jour les styles de bordure des séparateurs comme suit :
- Couleur de la bordure : rgba(245,44,143,0.5)
- Bordure supérieure Largeur : 150px
- Bordure gauche Largeur : 150px
- Couleur de la bordure gauche : transparent
Remarque : Donner à la couleur de la bordure une semi-transparence permettra de révéler les formes qui se chevauchent pour un élément de conception supplémentaire.
C’est également une bonne idée d’étiqueter ce nouveau séparateur comme « forme 1 » pour faciliter son identification ultérieure.
Comme nous allons ajouter une animation de défilement aux formes supplémentaires que nous allons créer, il est important de donner à cette forme (et aux formes supplémentaires de cette colonne) une position absolue afin qu’elles s’empilent les unes sur les autres et qu’elles aient donc le même point de départ pour l’animation.
Sous l’onglet avancé, changez la position en absolue et conservez la position par défaut en haut à droite :
- Position : Absolue
- Emplacement de la position : En haut à droite (par défaut)
REMARQUE : il est important de conserver l’emplacement de la position en haut à droite, car tout autre emplacement qui ajoute un positionnement centré (comme centre supérieur ou centré) entrera en conflit avec les options de transformation que nous ajouterons plus tard aux formes CSS.
Félicitations pour la création d’un triangle CSS ! Même si ce n’est pas très impressionnant en soi, il y a mieux. Nous pouvons dupliquer ce triangle pour créer toutes sortes de nouvelles conceptions une fois que nous les déplaçons avec l’animation.
Création de la forme 2 avec l’animation de défilement
Pour créer la forme suivante (ou le triangle dans ce cas), dupliquez le module de séparation précédent (forme 1) pour ajouter un triangle identique en haut à droite qui se trouve directement au-dessus de la forme de triangle précédente.
Intitulez-le ensuite « Forme 2 ».
Ouvrez les paramètres du séparateur « forme 2 » et ajoutez l’effet de transformation rotatif suivant :
- Effets de transformation du défilement : Rotation
- Activer la rotation : OUI
- Rotation de départ : 0° (à 30%)
- Rotation moyenne : 45° (à 45%)
- Rotation finale : 90° (à 60%)
Création de la forme 3 avec l’animation de défilement
Dupliquez le module diviseur « shape 2 » et nommez le duplicata « shape 3 ».
Mettez ensuite à jour les paramètres de rotation de la transformation comme suit :
- Rotation centrale : 90
- Rotation finale : 180°
Pour créer la dernière (quatrième) forme, dupliquez le module diviseur de la forme 3 et étiquetez-le « forme 4 ».
Mettez ensuite à jour les paramètres de rotation de la transformation comme suit :
- Rotation centrale : 180°
- Rotation finale : 270
À ce stade, vous devriez voir une forme carrée créée par les triangles superposés et maintenant tournés.
Test de l’animation de défilement
Pour tester l’animation de défilement de ces formes, ajoutons des marges temporaires en haut et en bas de la section. Ouvrez les paramètres de la section et mettez à jour les éléments suivants :
- Marge : 80vh en haut, 80vh en bas
Voici à quoi cela devrait ressembler lorsque vous faites défiler la page de haut en bas.
Avant d’explorer de nouvelles façons de personnaliser ces animations de formes, nous allons compléter notre conception par un titre fictif dans la colonne de droite. N’hésitez pas à sauter cette étape si vous souhaitez poursuivre avec les conceptions de formes.
Ajout d’un titre factice dans la colonne de droite (facultatif)
Pour vous donner une idée de la façon dont vous pouvez utiliser ces formes animées sur une page, j’ai pensé que ce serait une bonne idée d’ajouter un titre fictif dans la colonne de droite. Il s’agit d’un excellent exemple de la façon dont vous pouvez compléter les titres des sections de votre page par une animation étonnante à l’aide de formes CSS.
CSS personnalisé pour la colonne
Avant d’ajouter le titre, nous pouvons nous assurer que le texte est centré verticalement dans la colonne en utilisant la propriété display flex. Ouvrez les paramètres de la colonne 2 et ajoutez le CSS personnalisé suivant à l’élément principal :
display:flex ; flex-direction:column ; align-items:center ;
Une fois que le CSS de la colonne est en place, ajoutez un nouveau module de texte à la colonne 2.
Ouvrez ensuite les paramètres du texte et mettez à jour le contenu du corps avec un titre h2 comme suit :
<h2>design élégant</h2&gt ;
Sous l’onglet design, mettez à jour les éléments suivants :
- Police de caractères de l’en-tête 2 : Poppins
- Alignement du texte de l’en-tête 2 : par défaut (ordinateur de bureau), centré (tablette et téléphone)
- Taille du texte de l’en-tête 2 : 55px (ordinateur de bureau), 45px (tablette), 35px (téléphone)
- Largeur : 100 %
Pendant que nous y sommes, allez-y et ajoutez l’effet de transformation de défilement « mouvement horizontal » suivant au texte comme suit :
- Effets de transformation du défilement : Mouvement horizontal
- Activer le mouvement horizontal : OUI
- Décalage de départ : 2 (à 20%)
- Décalage moyen : 1 (à 35 %)
- Décalage final : -0.6
Ouvrez ensuite les onglets réactifs et mettez à jour le décalage de fin comme suit :
- Décalage final (tablette et téléphone) : 0
Exploration des animations de la forme triangulaire supérieure droite
En continuant là où nous nous sommes arrêtés avant d’ajouter notre texte de titre, nous pouvons maintenant explorer les possibilités de conception et d’animation de la forme actuelle du triangle supérieur droit.
Une façon simple de le faire est d’utiliser la sélection multiple pour sélectionner les quatre formes CSS (construites avec des modules de séparation).
Ensuite, ouvrez les paramètres de l’une des formes pour faire apparaître la modale des paramètres de l’élément qui mettra à jour la conception des quatre modules en une seule fois afin que vous puissiez voir les résultats visuellement.
Sélectionnez ensuite l’onglet Conception et ouvrez l’onglet Origine de la transformation. Positionnez la modale d’affichage des calques et la modale des paramètres de l’élément vers la gauche pour que vous puissiez voir les changements visuellement dans le Divi Builder.
Exploration des animations de conception de la forme CSS du triangle ascendant
Maintenant que la configuration est en place, vous pouvez explorer la création de nouvelles formes et voir comment elles se présentent avec les animations de défilement actuelles.
Dans l’exemple suivant, nous allons créer une forme CSS en forme de triangle ascendant (techniquement, un triangle isocèle).
Pour ce faire, assurez-vous de sélectionner plusieurs formes et de mettre à jour les styles de bordure de chacune d’entre elles comme suit :
- Largeur de la bordure droite : 100px
- Couleur de la bordure droite : transparent
- Bordure inférieure Largeur : 100px
- Couleur de la bordure inférieure : rgba(245,44,143,0.5)
- Bordure gauche Largeur : 100px
- Couleur de la bordure gauche : transparent
Mise à jour de l’origine de la transformation pour explorer de nouvelles conceptions d’animation de défilement
Maintenant que nous avons mis en place une forme/triangle légèrement différente, l’animation de rotation qui en résulte sera également différente. Pour explorer les différentes possibilités d’animation de défilement, assurez-vous que les quatre formes sont sélectionnées à l’aide de la sélection multiple, puis ajustez l’origine de la transformation pour voir les résultats.
Exploration des animations de formes CSS en forme de goutte d’eau
Vous devriez maintenant comprendre le fonctionnement de ce processus. Pour la conception suivante, nous allons créer une forme de larme en créant un triangle en bas à droite avec un rayon de bordure.
Pour ce faire, assurez-vous de sélectionner plusieurs fois toutes les formes et mettez à jour les styles de bordure de chacune d’entre elles comme suit :
- Coins arrondis : 0px en haut à droite, 50% en haut à droite, 50% en bas à droite, 50% en bas à gauche
- Bordure inférieure Largeur : 150px
- Couleur de la bordure inférieure : rgba(245,44,143,0.5)
- Bordure gauche Largeur : 150px
- Couleur de la bordure gauche : transparent
Ajustez ensuite la valeur d’origine de la transformation pour explorer les conceptions d’animation de défilement pour la larme.
Exploration des animations de la forme CSS du secteur (ou de la tranche de pizza)
À présent, vous devriez comprendre comment ce processus fonctionne. Pour la conception suivante, nous allons créer une forme de secteur en créant un triangle en bas à droite avec un rayon de bordure.
Pour ce faire, assurez-vous de sélectionner plusieurs fois toutes les formes et mettez à jour les styles de bordure de chacune d’entre elles comme suit :
- Coins arrondis : 0px en haut à droite, 0px en haut à droite, 50% en bas à droite, 50% en bas à gauche
- Bordure droite Largeur : 75px
- Bordure droite Couleur : transparent
- Bordure inférieure Largeur : 75px
- Couleur de la bordure inférieure : rgba(245,44,143,0.5)
- Bordure gauche Largeur : 75px
- Couleur de la bordure gauche : transparent
Ajustez ensuite l’origine de la transformation pour explorer les différents designs d’animation de défilement.
Exploration des animations de la forme CSS trapézoïdale
Pour notre dernière conception de forme CSS, nous allons créer une forme CSS trapézoïdale qui peut ajouter un peu de largeur supplémentaire à un triangle ascendant (ou isocèle).
Pour ce faire, assurez-vous de sélectionner plusieurs formes et de mettre à jour les styles de bordure de chacune d’entre elles comme suit :
- Coins arrondis : 0px
- Bordure droite Largeur : 100px
- Bordure droite Couleur : transparent
- Bordure inférieure Largeur : 100px
- Couleur de la bordure inférieure : rgba(245,44,143,0.5)
- Bordure gauche Largeur : 100px
- Bordure gauche Couleur : transparent
Ensuite, mettez à jour la largeur des formes/modules comme suit :
Une fois la forme trapézoïdale en place, vous pouvez à nouveau utiliser la mise à jour de l’origine de la transformation pour chacun d’entre eux afin d’explorer les nouveaux modèles d’animation de défilement.
Résultats finaux
Jetons un dernier coup d’œil à quelques-unes de mes conceptions préférées qui sont possibles grâce à ce tutoriel.
Réflexions finales
Explorer la façon de créer et d’animer des formes CSS dans Divi peut être un excellent moyen de faire jaillir votre créativité tout en élargissant votre vision de la puissance des capacités de conception intégrées de Divi. L’astuce consiste à comprendre comment utiliser les bordures pour créer différentes formes. Ensuite, vous pouvez ajouter une animation de défilement à ces formes. Mais n’oubliez pas la puissance de la transformation d’origine, qui modifie la façon dont ces animations positionnent chaque forme. Il ne s’agit bien sûr que de la partie émergée de l’iceberg lorsque vous pensez à toutes les formes et animations différentes que vous pouvez combiner pour créer une infinité de designs créatifs pour votre site Web.
Nous espérons que cela vous donnera quelques idées sur la façon d’ajouter l’animation CSS parfaite à votre propre site.
J’ai hâte de lire vos commentaires.
À la vôtre !
