Comment créer un effet de défilement de mouvement 3D dans Divi

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). L’idée est simple. Avant d’utiliser l’effet de défilement pour déplacer les éléments horizontalement ou verticalement, nous utilisons la rotation de transformation pour faire tourner le conteneur d’éléments. Cela permet de se déplacer (défiler) sur un plan dans l’espace 3D. Dans ce tutoriel, nous vous 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, vous devez d’abord les télécharger en utilisant les boutons ci – dessous. Pour accéder au téléchargement, vous devez vous abonner à notre liste de diffusion quotidienne Divi en utilisant le tableau ci – dessous. En tant que nouvel utilisateur, vous recevrez plus de Divi Goods et un paquet gratuit Divi Layout le lundi! Si vous êtes déjà sur la liste, il vous suffit de saisir votre adresse e – mail ci – dessous et cliquez sur télécharger. Vous ne serez pas « ré – abonné » ou vous recevrez un courriel supplémentaire.
Télécharger le fichier Inscrivez – vous à Divi Newsletter et nous vous enverrons par courriel une copie du dernier paquet de mise en page de la page d’atterrissage Divi, ainsi qu’un grand nombre d’autres ressources, conseils et astuces Divi gratuits. Suivez – nous et vous serez bientôt maître Divi. Si vous êtes déjà abonné, entrez votre adresse e – mail ci – dessous et cliquez sur télécharger pour accéder au paquet Layout. Vous 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 d’extraire
Vous pouvez compresser le fichier et faire glisser le fichier json dans Divi Builder.
Commençons le tutoriel. Que devez – vous commencer? Pour commencer, vous devez faire ce qui suit: si ce n’est 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 l’option créer à partir de zéro. Ensuite, vous aurez une toile vierge à concevoir dans Divi. Le concept de création d’un 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 l’élément voit de l’utilisateur \/ écran dans l’espace 3D après la rotation de l’élément enfant. Ajoute une rotation de transformation à une colonne, puis ajoute une valeur de degré à la colonne en changeant l’option de rotation le long de l’axe des X ou des Y. Enfin, nous ajoutons l’effet de défilement aux modules à l’intérieur de la colonne, en déplaçant les modules le long d’un plan qui tourne dans l’espace 3D. En d’autres termes, les modules semblent « éloignés » et « proches » des utilisateurs. Gardez cela à l’esprit lorsque nous examinerons la conception de ce tutoriel ci – dessous. Plongeons. Partie 1: ajout d’une rotation 3D et d’un 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 s’agira d’un excellent design pour présenter le produit ou l’étude de cas d’une 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 d’ombre floue: 60 pixels couleur d’ombre: 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 l’image en place, nous pouvons maintenant faire tourner les colonnes dans l’espace 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 l’axe Y: 30 degrés

Maintenant que les éléments tournent dans l’espace 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 l’onglet mouvement vertical… Activer le mouvement vertical dans l’onglet 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 l’é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)