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)

Ensuite, ouvrez les paramètres du module image et mettez à jour ce qui suit: sur l’onglet 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 l’effet de mouvement: haut et bas redimensionner les éléments en haut de l’onglet… Activer l’é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 l’effet de glissement de mouvement 3D. Partie 2: ajouter la rotation et mo
Les lignes sont les suivantes: alignement de l’image: marges centrales: – 20px en haut, – 20px en bas ombres de cadre: voir capture d’é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 L’image au – dessus et au – dessous des colonnes. L’ombre de la boîte se détache un peu de la colonne. Maintenant, ajoutons l’effet de défilement à l’image pour compléter l’effet que vous avez ajouté à la colonne suivante. Sur l’onglet 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 l’onglet 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) C’est le résultat jusqu’ici… Créer le contenu de la colonne de droite (facultatif) L’étape suivante est facultative parce qu’elle n’a pas d’éléments 3D ou d’effets 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

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée. Les champs obligatoires sont indiqués avec *