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.
L’image est ensuite téléchargée sur le formulaire. Sur l’onglet conception, mettez à jour les options de largeur suivantes: largeur: 100% largeur maximale: 448 Px (bureau), 348 Px (tablette), 148 Px (téléphone). Remarque: chaque dimension de largeur maximale est déterminée avec précision par le milieu de la ligne moins le bord de 2 pixels. Par conséquent, pour le Bureau, la largeur maximale de la ligne est de 900 Px. La moitié de la ligne est de 450 pixels. Ensuite, retirez le 2px ajouté du bord pour obtenir 448px. Pour créer les deux images suivantes, copiez le formulaire d’image trois fois.
Ensuite, déplacez une des images dans la colonne 2. Partie 3: ajouter un style personnalisé et une animation de défilement à l’image avant le style d’image shadow pour appliquer le style à l’ombre de l’image précédente, ouvrez les paramètres de la première image (ou plus) dans la colonne 1 et mettez à jour les options de filtre comme suit: Saturation: 0% opacité: 10% Pour s’assurer que l’image ombragée est directement derrière l’image précédente, mettre à jour la position de l’image comme suit: position: décalage vertical absolu: 5vw Note: le décalage vertical doit être égal au remplissage supérieur de la colonne afin que l’image reste alignée verticalement.
Avant de définir le style de l’image et les paramètres de défilement, ouvrez les paramètres de la deuxième image dans la colonne 1 (maintenant au – dessus de l’image ombragée) et mettez à jour le filtre de saturation pour en faire une version en noir et blanc de l’image comme suit: Saturation: 0% Sur l’onglet avancé, sous effets de transformation de diapositives, sélectionnez l’onglet mouvement horizontal et activez le mouvement horizontal. Alors…
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