Qu’il s’agisse d’une page de portfolio ou d’une galerie d’images, les concepteurs Web doivent présenter leurs conceptions aux clients dans le cadre d’une activité commerciale. Et souvent, ces exemples de leur travail contiennent des images de conceptions de pages Web entières qui peuvent prendre beaucoup de place. Pour cette raison, l’ajout d’un effet de survol de défilement à ces images peut faire en sorte que votre portefeuille se démarque des autres. Cela permet à l’utilisateur de voir initialement une partie compacte de la conception. Cependant, lorsque l’utilisateur passe la souris sur l’image, l’image défile pour révéler lentement le reste de la conception, comme s’il faisait défiler une page Web. Vous pouvez voir ce genre d’effet sur notre propre page avec les packages de mise en page Divi.

Dans ce tutoriel, je vais vous montrer comment utiliser Divi Images pour ajouter une image de défilement qui permet aux utilisateurs de prévisualiser les brouillons de la page Web. C’est un élément interactif élégant que je pense que vous allez adorer.

Avant goût

Voici un aperçu de l’effet de survol de défilement que nous allons rassembler dans ce didacticiel.

Téléchargez GRATUITEMENT la disposition des effets de survol de défilement vers le bas

Pour mettre la main sur ces exemples de conceptions d’effet de survol de défilement vers le bas, vous devez d’abord les télécharger à partir du bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur Télécharger. Vous ne serez plus abonné et ne recevrez aucun e-mail supplémentaire.

Téléchargez les fichiers

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et faites glisser le fichier JSON dans le Divi Builder.

Nous arrivons maintenant au tutoriel.

Ce dont vous avez besoin pour commencer

Pour ce tutoriel de cas d’utilisation, nous allons créer notre design à partir de zéro en utilisant Divi. Vous aurez également besoin d’images / captures d’écran à utiliser pour les éléments du portfolio. Je suggérerais d’utiliser des images d’au moins 1080 pixels de large.

Créez la ligne à trois colonnes

Si vous ne l’avez pas déjà fait, créez une nouvelle page. Ensuite, donnez un titre à votre page et fournissez le Divi Builder dans le frontend. Créez ensuite une nouvelle section avec une ligne à trois colonnes.

Effet de survol de défilement vers le bas Divi

Mettez à jour les paramètres de ligne comme suit:

Largeur personnalisée: 100%
Rembourrage personnalisé (bureau): 5% à gauche, 5% à droite
Rembourrage personnalisé (tablette): 25% à gauche, 25% à droite
Rembourrage personnalisé (téléphone): 15% à gauche, 15% à droite

Ensuite, nous devons ajouter les extraits de code CSS personnalisés suivants à chacun des principaux éléments de la colonne. Sous l’onglet Avancé, ajoutez le CSS suivant:

Colonne 1 élément principal CSS:

overflow: hidden;
height: 400px;

Colonne 2 élément principal CSS:

overflow: hidden;
height: 400px;

Colonne 3 élément principal CSS:

overflow: hidden;
height: 400px;

Effet de survol de défilement vers le bas Divi

Notez que la hauteur de chaque colonne est de 400 pixels. Cela sert finalement de hauteur de la fenêtre de l’image qui fait défiler pendant le survol. La propriété « overflow: hidden » garantit que la partie de l’image qui est déplacée hors de la colonne (pendant le survol) reste masquée. Cela devrait avoir plus de sens lorsque nous ajoutons l’effet de survol de transformation à l’image.

Créez l’image en faisant défiler vers le bas

Maintenant, nous pouvons commencer à créer notre image en faisant défiler vers le bas. C’est étonnamment facile une fois que vous comprenez comment fonctionne l’effet. Fondamentalement, nous devons simplement ajouter une image, puis utiliser la propriété transform translate pour déplacer l’image de 100% vers le haut en survol. Pour vous assurer que l’image s’arrête dans la bonne position, vous devez ajouter une bordure supérieure correspondant à la hauteur de la colonne lorsqu’elle flotte. Cela garantit que l’image ne défile plus exactement là où l’image inférieure est affichée.

Découvrez comment le faire.

Ajoutez un module d’image à la colonne 1. Ajoutez ensuite les options de survol suivantes:

Bordure personnalisée (survol): 400 px en haut
Transformer l’axe Y de translation (survol): -100%

Assurez-vous que la marge supérieure personnalisée lorsqu’elle est flottante est la même que la hauteur donnée à votre colonne dans le CSS personnalisé ci-dessus.

En outre, la valeur de l’axe Y de la conversion de transformation est un pourcentage (-100%) et non des pixels. Vous devez donc le saisir manuellement en tapant la valeur dans le champ de saisie des contrôles de traduction de traduction.

Effet de survol de défilement vers le bas Divi

Voici comment fonctionne l’effet de survol de défilement vers le bas

Cela peut être utile si j’explique la fonctionnalité de cette configuration à l’aide de quelques illustrations visuelles. Par exemple, supposons que l’image que vous utilisez ait une hauteur de 700 pixels. La hauteur de la colonne n’est que de 400 pixels. Cela signifie que par défaut (avant le survol) le débordement inférieur de cette image est masqué car il s’étend à l’extérieur de la colonne.

Effet de survol de défilement vers le bas Divi

Dès que l’utilisateur passe la souris sur l’image, deux choses se produisent.

Tout d’abord, la propriété de traduction de transformation décale l’image vers le haut avec une valeur d’axe Y de -100%. En d’autres termes, l’image se déplace de 100% vers le haut quelle que soit la hauteur de l’image (700 px).

Effet de survol de défilement vers le bas Divi

Ensuite, l’image reçoit une marge supérieure de 400 pixels pour la ramener dans la fenêtre de la colonne afin qu’elle se trouve parfaitement en bas.

Effet de survol de défilement vers le bas Divi

Cela se produit en même temps que l’effet de survol de transformation, le résultat est donc un défilement fluide qui se termine par un placement parfait.

Voici à quoi ressemble le résultat dans l’exemple en direct.

Effet de survol de défilement vers le bas Divi

Réglage de la durée de transition et de la courbe de vitesse

Comme vous pouvez le voir, la durée de transition est trop rapide pour prévisualiser l’image en survolant. Pour le ralentir, vous pouvez mettre à jour la durée de la transition. Vous pouvez également ajuster le graphique de vitesse pour changer la vitesse pendant la durée.

Mettez à jour les éléments suivants:

Temps de transition: 4000 ms
Courbe de vitesse de transition: facile

Effet de survol de défilement vers le bas Divi

En général, vous devez augmenter le temps de transition pour les images de hauteur plus élevée pour donner à l’utilisateur le temps de traiter l’image lorsque l’effet de défilement survolé se produit.

Copiez le module d’image et collez-le dans les colonnes restantes

Il ne vous reste plus qu’à copier le module image et à le coller dans les colonnes 2 et 3. Mettez ensuite à jour les images de chaque image avec la nouvelle image souhaitée. C’est ça!

Effet de survol de défilement vers le bas Divi

Ajouter un titre au-dessus de chaque image à l’aide d’un module de texte

Si vous souhaitez ajouter un titre à chacune de vos images, vous pouvez le faire via le module de texte. Cependant, nous devons apporter quelques ajustements au module de texte et au module d’image pour que cela fonctionne.

Dans la colonne 1, ajoutez un nouveau module de texte au-dessus de l’image. Vous pouvez utiliser le mode d’affichage filaire plus facilement car votre colonne est définie sur une hauteur de colonne.

Effet de survol de défilement vers le bas Divi

Ensuite, mettez à jour le contenu avec un en-tête H2 comme celui-ci:

Homepage

Effet de survol de défilement vers le bas Divi

Ensuite, mettez à jour les paramètres du thème comme suit:

Couleur d’arrière-plan: #ffffff
Alignement du texte: centre
Taille du texte du titre 2: 20 px
Titre 2 hauteur de ligne: 2em
Marge personnalisée: 0px ci-dessous
Rembourrage personnalisé: 10px sur le dessus
Box Shadow: voir capture d’écran

Effet de survol de défilement vers le bas Divi

Ces paramètres peuvent sembler arbitraires, mais ils ne le sont pas. Ces valeurs peuvent prédire la hauteur du module de texte, ce qui est important pour plus tard. Par exemple, je sais que le module de texte aura une hauteur de 60 px. Faisons le calcul …

La hauteur de la ligne est de 2em, soit deux fois la taille du texte pour le titre 2 (20 pixels). Cela signifie que ma hauteur de ligne sera de 40 px.

Le remplissage supérieur personnalisé est défini sur 10 pixels. Et il y a un rembourrage inférieur caché de 10px, qui est déjà fourni par défaut dans Divi pour tous les en-têtes. Les rembourrages supérieur et inférieur offrent une hauteur supplémentaire de 20 pixels.

Donc … 40px (hauteur de ligne) + 20px (remplissage) = 60px

Effet de survol de défilement vers le bas Divi

Nous connaissons maintenant la hauteur du module de texte. Bien sûr, vous pouvez toujours vérifier l’élément avec des outils de développement pour être sûr.

La marge inférieure personnalisée de 0px est nécessaire pour supprimer la marge standard qui se trouve sous le module (ajoutée par la largeur de la gouttière).

Étant donné que l’image se superposera un peu lors du déplacement du module de texte, nous devons nous assurer que le module de texte se trouve au-dessus de l’image. Nous pouvons le faire en donnant au module de texte une position relative et en changeant la valeur de z-index comme ceci:

Ajoutez le CSS personnalisé suivant à l’élément principal:

position:relative;

Ensuite, mettez à jour le z-index:

Indice Z: 3

Effet de survol de défilement vers le bas Divi

Copiez et collez le module de texte

Une fois l’en-tête de texte prêt, nous pouvons le copier et le coller (en mode d’affichage filaire) sur les images des colonnes 2 et 3.

Effet de survol de défilement vers le bas Divi

Ensuite, tout ce que vous avez à faire est de mettre à jour le contenu de chacun.

Effet de survol de défilement vers le bas Divi

Mettez à jour la marge supérieure flottante de chaque image pour prendre en compte la hauteur du module de texte

Actuellement, chacune des images des colonnes 1, 2 et 3 a une marge supérieure personnalisée de 400 pixels lorsqu’elle est flottante. Cela a été défini pour correspondre à la hauteur de la hauteur personnalisée de la colonne. Étant donné que le module de texte occupe maintenant une partie de la zone de colonne (une hauteur de 60 pixels), nous devons ajuster la valeur flottante pour la marge supérieure.

Pour ce faire, utilisez la fonction de sélection multiple pour sélectionner les trois images. Ensuite, mettez à jour les paramètres de l’élément comme suit:

Bordure personnalisée (survol): 340 px en haut

Effet de survol de défilement vers le bas Divi

Désormais, à la fin de la lévitation, vos images seront parfaitement mises en pause en bas de la colonne.

En bout de ligne

Voici le résultat final de la conception.

Vous pouvez également dupliquer la ligne et mettre à jour les images et le texte d’en-tête si nécessaire pour plus d’annonces de portefeuille.

Effet de survol de Divi

Voici à quoi cela ressemble sur une tablette et un téléphone portable.

Effet de survol de défilement vers le bas Divi

Effet de survol de défilement vers le bas Divi

Dernières pensées

Présenter les conceptions de votre site Web avec un effet de défilement vers le bas personnalisé permet non seulement une interaction vraiment cool, mais aussi un gain de place important. Cela vous permet d’afficher de nombreuses images dans une mise en page compacte et symétrique. Nous obtenons généralement ce type de fonctionnalité avec un plugin. Cependant, avec Divi, vous avez un contrôle complet sur la conception et les fonctionnalités sans avoir à ajouter un autre plugin. J’espère que cela vous inspirera à créer de belles galeries de portfolio pour votre prochain projet.

J’ai hâte de vous entendre dans les commentaires.

De bas en haut!

Le message Ajouter un effet de défilement vers le bas pour prévisualiser les conceptions de sites Web dans Divi a été publié pour la première fois sur le blog Elegant Themes.



Source link

Recent Posts