Comment combiner animation et parallaxe dans Divi pour un design unique

Que nous préparions un repas ou que nous planifiions un site Web, les ingrédients seuls ne garantissent pas un plat délicieux ou un bon site Web. C’est la façon dont nous combinons ces éléments qui fait la différence. Dans ce tutoriel, je vais vous montrer comment combiner animation et parallaxe d’image d’une manière que vous n’avez jamais envisagée auparavant. Si vous ne savez pas encore, l’animation est une propriété Divi intégrée qui peut être ajoutée à n’importe quel élément Divi lorsque la page est chargée. Parallaxe est également une option Divi qui vous permet d’ajouter un mouvement unique à l’image de fond qui défile.
Aujourd’hui, nous utiliserons les paramètres de conception intégrés de Divi pour combiner l’animation et la parallaxe de diverses façons créatives. Cette combinaison est assez magique pour créer une belle mise en page d’images parallaxes animées qui sont superbes lorsque vous faites défiler la page. Allons – y! Un voyeur. 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. Veuillez vérifier votre adresse e – mail pour confirmer votre abonnement et accéder au packaged
Iversa utilise des effets parallaxes réalistes. Nous fournirons également des animations. Ajouter un nouveau formulaire texte à la colonne 2. Ensuite, mettez à jour le texte avec le mot \ Police de texte: Fire monochrome text font style: tt text alignment: Center text color: # FFFFFF text letter Spacing: 10px width: 320 Px maximum width: 320 Px form Alignment: Center Marges: (bureau): – 5vw vers le haut, 4vw vers le bas marges (tablette et téléphone): 3vw vers le Haut remplir: 70px vers le haut, 70px vers le bas Largeur du bord: 20px couleur du bord: # FFFFFF style d’animation: direction de l’animation de diapositives: retard de l’animation vers le bas: 200 ms Créer un troisième formulaire de texte avec une nouvelle image de fond parallaxe pour créer un troisième formulaire de texte, copiez le formulaire de texte nouvellement créé dans la colonne 2.

Par conséquent, nous conserverons la même image de fond, mais nous mettrons à jour l’effet parallaxe en utilisant la méthode CSS parallaxe.
Largeur: 240 Px largeur maximale: 240 Px alignement du module: marge gauche: 0px remplissage du Bas: 170 Px haut, 170 Px bas, 95 Px gauche, 95 Px droite largeur personnalisée et remplissage à gauche et à droite pour créer un affichage de texte vertical, idéal pour les conceptions de modules plus longs.

Ensuite, Rafraîchissez la direction de l’animation en haut plutôt qu’en bas. Direction de l’animation: Sue Résultats finaux examinons maintenant les résultats finaux. Partie 2: créer une animation et un design parallaxes (version 2) Le prochain projet ajoutera une animation unique en téléchargeant une image de fond parallaxe de la ligne après l’animation initiale du module. Pour ce faire, nous devons utiliser
En attendant. Ajouter une couleur de fond à une section pour fournir une couleur de fond initiale pour le texte avant l’animation de ligne fournit une couleur de fond pour la section. Allumez les paramètres de section et ajoutez ce qui suit: couleur de fond du gradient gauche: rgba (13630103,0.61) couleur de fond du gradient droit: # 881e67 type de gradient: radial Résultats finaux examinons maintenant les résultats finaux. Vous pouvez également être plus créatif en ajoutant un mode de fusion à la deuxième ligne et en ajoutant une animation de zoom qui fonctionne avec l’animation du module. Mode de fusion: styles d’animation de luminosité: échelle C’est le résultat final. Voici à quoi ça ressemble sur un appareil mobile. J’espère que vous avez appris quelque chose en explorant des façons uniques de combiner des images animées et parallaxes. Le résultat est absolument unique et je suis sûr que vous pouvez facilement modifier cette configuration et créer d’innombrables autres combinaisons qui seront étonnantes dans votre prochain projet. J’ai hâte d’entendre vos commentaires. Bonjour!