Vous pouvez facilement ajouter des effets de défilement mobiles 3D au site Web Divi en combinant des fonctionnalités Divi intégrées puissantes (effet de défilement et rotation de transformation). Lamp;rsquoidée est simple. Avant damp;rsquoutiliser lamp;rsquoeffet de défilement pour déplacer les éléments horizontalement ou verticalement, nous utilisons la rotation de transformation pour faire tourner le conteneur damp;rsquoéléments. Cela permet de se déplacer (défiler) sur un plan dans lamp;rsquoespace 3D. Dans ce tutoriel, nous montrerons comment ajouter un effet de défilement de mouvement 3D au site Web Divi. Pour ce faire, nous créerons une mise en page simple avec deux exemples de conception montrant les effets de glissement de mouvement 3D.
Allons y! Voici une brève introduction à la conception que nous allons construire ensemble. Téléchargement gratuit mise en page pour obtenir les dessins de ce tutoriel, devez damp;rsquoabord les en utilisant les boutons ci dessous. Pour accéder au téléchargement, devez abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci dessous. En tant que nouvel utilisateur, recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! êtes déjà sur la liste, il suffit de saisir votre adresse e mail ci dessous et cliquez sur . Vous ne serez pas « ré abonné » ou recevrez un courriel supplémentaire.
Télécharger le fichier
Inscrivez à Divi Newsletter et nous enverrons par courriel une copie du dernier paquet de mise en page de la page damp;rsquoatterrissage Divi, ainsi quamp;rsquoun grand nombre damp;rsquoautres ressources, conseils et astuces Divi gratuits. Suivez nous et serez bientôt maître Divi. êtes déjà abonné, entrez votre adresse e mail ci dessous et cliquez sur pour accéder au paquet Layout. Vous êtes inscrit avec succès. Vérifiez votre adresse e mail pour confirmer votre abonnement et Obtenez gratuitement le paquet hebdomadaire Divi Layout! Pour importer une mise en page dans une page, il suffit damp;rsquoextraire
Vous pouvez compresser le fichier et faire glisser le fichier json dans Divi Builder.
Commençons le tutoriel. Que devez commencer? Pour commencer, devez faire ce qui suit: si ce namp;rsquoest pas déjà fait, installez et activez le thème Divi. Créez une nouvelle page dans WordPress et utilisez Divi Builder pour éditer la page à l’avant (Visual Builder). Sélectionnez lamp;rsquooption créer à partir de zéro. Ensuite, aurez une toile vierge à concevoir dans Divi. Le concept de création damp;rsquoun effet de défilement en mouvement 3D dans Divi prend en fait trois étapes: ajouter une perspective à une ligne, ajouter une rotation de transformation à une colonne, ajouter un effet de défilement à un module Voici une brève introduction à la façon de le faire
Ajouter une perspective à la ligne pour les paramètres de ligne, ajouter un clip CSS personnalisé qui ajoute une perspective en utilisant une valeur qui détermine la distance que lamp;rsquoélément voit de lamp;rsquoutilisateur écran dans lamp;rsquoespace 3D après la rotation de lamp;rsquoélément enfant. Ajoute une rotation de transformation à une colonne, puis ajoute une valeur de degré à la colonne en changeant lamp;rsquooption de rotation le long de lamp;rsquoaxe des X ou des Y. Enfin, nous ajoutons lamp;rsquoeffet de défilement aux modules à lamp;rsquointérieur de la colonne, en déplaçant les modules le long damp;rsquoun plan qui tourne dans lamp;rsquoespace 3D. En damp;rsquoautres termes, les modules semblent « éloignés » et « proches » des utilisateurs.
Gardez cela à lamp;rsquoesprit lorsque nous examinerons la conception de ce tutoriel ci dessous. Plongeons. Partie 1: ajout damp;rsquoune rotation 3D et damp;rsquoun mouvement aux titres et aux images pour la première partie de la conception, nous ajouterons une rotation 3D aux titres et aux images fictifs. Il samp;rsquoagira damp;rsquoun excellent design pour présenter le produit ou lamp;rsquoétude de cas damp;rsquoune manière unique. Ajouter des sections et des lignes pour commencer, ajoutez une ligne à la colonne de la section normale par défaut fournie. Remplissage
Boîte damp;rsquoombre floue: 60 pixels couleur damp;rsquoombre: rgba (0,0,0,0,2)
Tourner la colonne ouvre la boîte de calques et ouvre les paramètres de la colonne. Une fois le texte et lamp;rsquoimage en place, nous pouvons maintenant faire tourner les colonnes dans lamp;rsquoespace 3D. Pour ce faire, ouvrez la boîte de calques, puis ouvrez les paramètres de la colonne. Puis mettre à jour avec les paramètres suivants: transformer la source: Centre supérieur Nous ajoutons maintenant la rotation de la transformation à la colonne comme suit: dans la plaque tournante de la transformation Changer le volant de lamp;rsquoaxe Y: 30 degrés
Maintenant que les éléments tournent dans lamp;rsquoespace 3D, nous pouvons ajouter un effet de défilement à chaque élément de la colonne. Pour commencer, ouvrez les paramètres du formulaire texte et ajoutez ce qui suit:
Sur lamp;rsquoonglet mouvement vertical Activer le mouvement vertical dans lamp;rsquoonglet redimensionnement vers le haut et vers le bas: s décalage initial: 4 (dans 0% viewport) décalage moyen: 0 (dans 50% viewport) décalage final: 4 (dans 100% viewport) Activer lamp;rsquoéchelle supérieure et inférieure: s Échelle initiale: 100% (dans 0% viewport) Échelle moyenne: 100% (dans 50% viewport) Échelle finale: 50% (dans 100% viewport)
Ensuite, ouvrez les paramètres du module image et mettez à jour ce qui suit: sur lamp;rsquoonglet mouvement vertical, ouvrez Activer le mouvement vertical: s déplacement initial: 0 (dans 0% viewport) déplacement moyen: 0 (dans 0% viewport) Déplacement final: 6.5 (dans 100% viewport) activer lamp;rsquoeffet de mouvement: haut et bas redimensionner les éléments en haut de lamp;rsquoonglet Activer lamp;rsquoéchelle supérieure et inférieure: s Échelle initiale: 130% (dans 0% viewport) Échelle moyenne: 100% (dans 50% viewport) Échelle finale: 50% (dans 100% viewport) Maintenant, regardons les résultats de la partie 1 de lamp;rsquoeffet de glissement de mouvement 3D. Partie 2: ajouter la rotation et mo
Les lignes sont les suivantes: alignement de lamp;rsquoimage: marges centrales: 20px en haut, 20px en bas ombres de cadre: voir capture damp;rsquoécran ombres de cadre horizontales: 40 Px ombres de cadre verticales: 0px ombrage de cadre forcé flou: 40 Px ombres couleur: rgba (0,0,0,0,2) les marges personnalisées étendent Lamp;rsquoimage au dessus et au dessous des colonnes. Lamp;rsquoombre de la boîte se détache un peu de la colonne. Maintenant, ajoutons lamp;rsquoeffet de défilement à lamp;rsquoimage pour compléter lamp;rsquoeffet que avez ajouté à la colonne suivante. Sur lamp;rsquoonglet mouvement vertical Activer le mouvement vertical: s décalage initial: 4 (dans 0% viewport) décalage moyen: 0 (dans 40% 60% viewport) décalage final: 4 (dans 100% viewport) dans lamp;rsquoonglet mouvement horizontal Activer le mouvement horizontal: s décalage initial: 4 (à 0% viewport) décalage moyen: 0 (à 40% 60% viewport) décalage final: 4 (à 100% viewport) Camp;rsquoest le résultat jusquamp;rsquoici Créer le contenu de la colonne de droite (facultatif) Lamp;rsquoétape suivante est facultative parce quamp;rsquoelle namp;rsquoa pas damp;rsquoéléments 3D ou damp;rsquoeffets de défilement. Cependant, il a terminé la mise en page. Dans la colonne de droite, nous ajouterons un nouveau formulaire texte qui constituera le contenu virtuel de la mise en page. Continuez en ajoutant un nouveau formulaire texte à la colonne 2. Paramètres du texte mettre à jour les paramètres du texte comme suit: police du texte: Poppins couleur du texte: rgba (0,0,0,0,4) taille du texte: 16px hauteur de la ligne de texte: 1,9em marge: 30px en bas Titre caractère 2: raleway titre 2 poids de police: gras titre 2 taille du texte: 48 Px hauteur de la ligne de titre 2: 1,5 em Boutons sous le formulaire de texte, ajoutez un nouveau formulaire de bouton. Conception du bouton puis mise à jour de la conception du bouton comme suit: couleur du texte du bouton: couleur du bouton blanc: couleur du bouton blanc
Comment créer un effet de défilement de mouvement 3D dans Divi
