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
Vous pouvez compresser le fichier et faire glisser le fichier json dans Divi Builder.
Commençons le tutoriel. Que devez – vous commencer?
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.
Boîte d’ombre floue: 60 pixels couleur d’ombre: rgba (0,0,0,0,2)
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
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.