Pour créer une image animée avant et après le défilement dans Divi
Pour diverses raisons, de nombreux sites Web doivent afficher des images avant et après. Par exemple, les entreprises de conception web peuvent présenter des images avant et après le site qu’elles ont créé, et les sites de conditionnement physique peuvent présenter des portraits avant et après leurs clients qui réussissent (et qui sont en bonne santé). Souvent, les sites Web se contentent d’une conception simple qui montre chaque photo adjacente l’une à l’autre. Dans ce tutoriel, nous améliorerons ce design traditionnel par une animation interactive. Dans ce tutoriel, nous vous montrerons comment créer des images de défilement animées avant et après dans Divi. Cette conception permet à l’utilisateur de voir les changements avant et après l’image lors du défilement de la page. C’est une excellente façon d’attirer les utilisateurs à faire défiler votre site vers le bas et à voir les transitions d’une manière unique. De plus, nous ne pouvons le construire qu’en utilisant les options intégrées de Divi. Pas besoin de code personnalisé ou de plug – in!
On y va. Voici une brève introduction à la conception que nous allons construire dans ce tutoriel. 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
Déplacez – vous à droite pendant le défilement. Dans la colonne 2, nous verrons l’image suivante, qui défilera de gauche dans la vue au fur et à mesure qu’elle défilera.
Ajouter trois images pour créer la première image, ajoutez un nouveau module image dans la colonne 1.
Mettre à jour ce qui suit: définir le mouvement horizontal du Bureau… Décalage initial: 0 (30%) décalage moyen: 2,26 (45%) décalage final: 4,52 (60%) réglage du mouvement horizontal de la tablette… Décalage initial: 0 (30%) décalage moyen: 1,76 (45%) décalage final: 3,52 (60%) réglage du mouvement horizontal du téléphone… Écart initial: 0 (30%) moyenne compensée: 0,76 (45%) Écart final: 1,52 (60%) Note: Notez que la valeur offset est définie en pixels. Une valeur de 1 est égale à 100 Px. Donc la valeur de 4,52 est en fait 452 Px. Ensuite, à la fin de l’animation horizontale sur le Bureau, l’image se déplace 452px vers la droite. 452px est déterminé par la moitié de la ligne (450px) plus le bord de 2px. Après le dernier réglage de défilement d’image, utilisez l’effet de défilement de mouvement horizontal suivant pour mettre à jour l’image finale dans la colonne 2: réglez le mouvement horizontal du Bureau… Compensation initiale: – 4,52 (30%) Compensation moyenne: – 2,26 (45%) décalage final: 0 (60%) régler le mouvement horizontal de la tablette… Compensation initiale: – 3,52 (30%) Compensation moyenne: – 1,76 (45%) Exemption finale: 0 (60%) set mobile horizontal… Compensation initiale: – 1,52 (30%) Compensation moyenne: – 0,76 (45%) Écart final: 0 (60%) Ajouter des marges pour le test de défilement avant de visionner l’animation de défilement, nous devons ajouter des marges temporaires vers le haut et vers le bas dans la Section afin que nous ayons de la place pour défiler dans la page active. Ouvrez les paramètres partiels et mettez à jour ce qui suit: marges: 80vh en haut, 80vh en bas Vérifiez maintenant les résultats sur la page active. Partie 4: créer du texte de titre avant et après pour compléter la conception, nous devons créer du texte avant et après le titre au – dessus de chaque image. Nouveau