Dans la conception de sites web, l'effet de survol est un effet dynamique très populaire qui peut être affiché lorsque l'utilisateur passe la souris sur une image ou un bouton.Effet de vagueIl s'agit d'un effet d'animation doux et attrayant qui simule l'ondulation des vagues, rendant l'image dynamique comme des vagues d'eau lorsqu'elle est survolée. Cet article vous explique pas à pas comment mettre en ?uvre cet effet dans la bibliothèque Elementor.

préliminaire

Pour créer un effet de survol de vague dans Elementor, vous avez besoin de ce qui suit :

1. Elementor plug-in (composant logiciel)Pour ce faire, vous devez vous assurer que le plugin Elementor est installé et activé. Si vous avez besoin de styles plus avancés, vous pouvez utiliser le plugin Elementor ProCe tutoriel peut être mis en ?uvre dans la version gratuite d'Elementor.
2. CSS personnaliséSi vous utilisez Elementor Pro, vous pouvez ajouter le CSS personnalisé directement à la page d'accueil de l'élément.Personnalisation de la section CSSAjouter un code.

étapes à suivre pour créer un effet de vague en survol

étape 1 : Ajouter les widgets de la galerie Elementor

1. Ouvrez le tableau de bord de WordPress et naviguez vers Pages > Ajouter une nouvelle pageou modifier une page existante.
2. Entrer dans Elementor éditeur (logiciel)Glisser-déposer dans la barre d'outils de gauche. archives d'images Widget (Galerie) sur la page et téléchargez les images que vous souhaitez afficher.

3. Configurez la disposition de la galerie en fonction de vos besoins.

étape 2 : Ajouter le nom de la classe à l'image

Pour faciliter l'application de l'effet de vague à une image spécifique, nous devons ajouter une fonctionNoms de classe personnalisésCela permet au code CSS de fonctionner uniquement sur ces images. Cela permet au code CSS de fonctionner uniquement sur ces images.

1. Sélectionnez le widget de la galerie et cliquez sur niveau élevé étiquettes.

2. existent Classe CSS Dans le champ, saisissez un nom de classe personnalisé, tel que ondulation de la vague.

étape 3 : Ajouter un code CSS personnalisé

Ensuite, nous allons implémenter l'effet de survol de la vague via CSS. Vous trouverez ci-dessous le code CSS, qui peut être ajouté à la section CSS personnalisée de la page, ou au CSS personnalisé du thème (si votre Elementor ne prend pas en charge l'ajout de CSS directement).

/* Style de base : définir l'effet de survol de l'image */
.wave-hover img {
  display : block ; /* Assurez-vous que l'image est animée correctement */
  transition : transform 0.4s ease-in-out ; /* Ajouter un effet de transition en douceur */
  will-change : transform ; /* Optimiser les performances en indiquant au navigateur que la transformation sera modifiée */
}

/* Effet de survol de la vague */
.wave-hover img:hover {
  transform : translateY(-10px) rotate(2deg) scale(1.05) ; } /* wave-hover */ }
  animation : wave 0.6s ease-in-out infinite ; /* Appliquer l'animation */
}

/* Définir l'animation de la vague */
@keyframes wave {
  0%, 100% {
    transform : translateY(-10px) rotate(2deg) ; /* les points de départ et d'arrivée sont les mêmes, boucle fluide */
  }
  25% {
    transform : translateY(-15px) rotate(-2deg) ; /* image décalée vers le haut, légèrement inversée */
  }
  50% {
    transform : translateY(0px) rotate(2deg) ; /* image revenue à la rotation initiale */
  }
  75% {
    transform : translateY(-5px) rotate(-1deg) ; /* l'image est décalée vers le bas et légèrement tournée */
  }
}

Description du code :

• .wave-hover img: Il s'agit du style d'état par défaut, qui définit l'effet de transition de l'image, permettant une transition en douceur vers l'effet de vague au survol.
• .wave-hover img:hoverLorsque la souris survole l'image, celle-ci se soulève légèrement, pivote, fait un zoom et démarre une animation de vagues.
• @keyframes wave: définit les images clés de l'animation de vague afin que l'image ondule de haut en bas au moment du survol, créant ainsi un effet de vague.

étape 4 : Sauvegarde et prévisualisation de la page

Après avoir effectué les étapes ci-dessus, enregistrez la page et cliquez sur Aper?u. Dans la page de prévisualisation, vous verrez que lorsque la souris passe sur l'image, celle-ci produit l'imageEffet de vagues ascendantes et descendantesLa nouvelle version du produit est une expérience visuelle unique et dynamique pour l'utilisateur.

étape facultative : réglage des paramètres de l'effet

Les paramètres de l'effet peuvent être ajustés avec précision en fonction des exigences de la conception :

• amplitude de l'onde: En ajustant translateY() permet de contr?ler l'ampleur de l'effet de vague. Des valeurs plus élevées produisent des vagues plus prononcées.
• Vitesse d'animation: Ajustements animation La durée de l'attribut (par ex. 0.6s) permet de contr?ler la vitesse de l'effet de vague.
• angle de rotation: : Changer rotation() permet de régler l'angle de rotation de l'image.

Optimisation supplémentaire : ajout d'effets d'ombre

Pour ajouter de la profondeur à l'effet, vous pouvez également ajouter des ombres à l'effet de survol pour que l'image semble plus tridimensionnelle lorsqu'elle fluctue.

.wave-hover img:hover {
  transform : translateY(-10px) rotate(2deg) scale(1.05) ;
  animation : vague 0.6s ease-in-out infini ;
  box-shadow : 0px 10px 15px rgba(0, 0, 0, 0, 0, 0.2) ;
}

résumés

L'effet de survol est un effet dynamique très répandu dans la conception de sites web, qui démontre l'interactivité lorsque l'utilisateur passe la souris sur une image ou un bouton. L'effet de vague simule le flux et le reflux d'une vague, donnant à l'image un effet aquatique et dynamique lorsqu'elle est survolée. Cet article décrit comment mettre en ?uvre cet effet dans la bibliothèque Elementor, y compris la configuration d'une bibliothèque d'images, l'ajout de noms de classe personnalisés, l'écriture du code d'animation de vague CSS et l'ajustement de l'ampleur, de la vitesse et des ombres de l'effet en fonction des besoins pour rendre un site web plus vivant et plus attrayant pour les utilisateurs.

Contactez nous
Vous n'arrivez pas à lire le tutoriel ? Contactez-nous pour une réponse gratuite ! Aide gratuite pour les sites personnels et les sites de petites entreprises !	Service clientèle WeChat
① Tel : 020-2206-9892
② QQ咨詢：1025174874
(iii) Courriel : info@361sale.com
④ Horaires de travail : du lundi au vendredi, de 9h30 à 18h30, jours fériés.