Cómo implementar un efecto wave hover en la galería Elementor (tutorial detallado)

En diseño web, el efecto hover es un efecto dinámico muy popular que puede mostrarse cuando el usuario pasa el ratón por encima de una imagen o un botón.Efecto de ondulaciónSe trata de un efecto de animación suave y atractivo que simula la ondulación de las olas, haciendo que la imagen parezca dinámica como las olas del agua cuando se cierne. Este artículo le mostrará paso a paso cómo implementar este efecto en la librería Elementor.

preliminar

Para crear un efecto wave hover en Elementor, necesita lo siguiente:

Elementor plug-in (componente de software): Asegúrese de que el plugin Elementor está instalado y activado. Si necesita estilos más avanzados, puede utilizar el plugin Elementor ProEste tutorial se puede implementar en la versión gratuita de Elementor.
CSS personalizado: El efecto wave hover requiere algo de CSS personalizado, así que asegúrese de que su tema o versión de Elementor permite CSS personalizado. si utiliza Elementor Pro, puede añadir el CSS personalizado directamente a la etiqueta del elementoPersonalizar la sección CSSAñada el código.

Pasos para crear un efecto de onda flotante

Paso 1: Añadir widgets de galería de Elementor

Abra el panel de control de WordPress y navegue hasta Páginas > Añadir nueva páginao edite una página existente.
Entrar en Elementor editor (software)Arrastre y suelte en la barra de herramientas de la izquierda. archivo de imágenes Widget (Galería) a la página y, a continuación, cargue las imágenes que desee mostrar.

Configure la disposición de la galería para adaptarla a sus necesidades de diseño.

Paso 2: Añada el nombre de la clase a la imagen

Para facilitar la aplicación del efecto de onda a una imagen específica, necesitamos añadir unNombres de clase personalizadosEsto permite que el código CSS funcione sólo en estas imágenes. Esto permite que el código CSS funcione sólo en estas imágenes.

Seleccione el widget de la galería y haga clic en alto nivel Etiquetas.

existe Clase CSS En el campo, introduzca un nombre de clase personalizado, como por ejemplo onda-hover.

Paso 3: Añadir código CSS personalizado

A continuación, implementaremos el efecto wave hover mediante CSS. A continuación encontrará el código CSS, que puede añadir a la sección de CSS personalizado de la página, o al CSS personalizado del tema (si su Elementor no admite añadir CSS directamente).

/* Estilo base: establecer imagen de efecto hover */
.wave-hover img {
  display: block; /* Asegúrese de que la imagen se anima correctamente */
  transition: transform 0.4s ease-in-out; /* Añada un efecto de transición suave */
  will-change: transform; /* Optimice el rendimiento indicando al navegador que la transformación cambiará */
}

/* Efecto wave hover */
.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05); } /* wave-hover */ }
  animation: wave 0.6s ease-in-out infinite; /* Aplicar animación */
}

/* Definir la animación de la ola */
@keyframes ola {
  0%, 100% {
    transform: translateY(-10px) rotate(2deg); /* los puntos inicial y final son el mismo, bucle suave */
  }
  25% {
    transform: translateY(-15px) rotate(-2deg); /* imagen desplazada hacia arriba, ligeramente invertida */
  }
  50% {
    transform: translateY(0px) rotate(2deg); /* imagen de vuelta a la rotación inicial */
  }
  75% {
    transform: translateY(-5px) rotate(-1deg); /* La imagen se desplaza hacia abajo y se rota ligeramente */
  }
}

Descripción del código:

.wave-hover img: Es el estilo de estado por defecto, que establece el efecto de transición de la imagen, permitiendo una transición suave al efecto de onda al pasar el ratón por encima.
.wave-hover img:hover: Cuando el ratón pasa por encima de la imagen, ésta se mueve ligeramente hacia arriba, gira y se acerca, e inicia una animación de ondas.
@keyframes ola: Define los fotogramas clave de la animación ondulada para que la imagen ondule hacia arriba y hacia abajo al pasar el ratón por encima, creando un efecto ondulado.

Paso 4: Guardar y previsualizar la página

Una vez completados los pasos anteriores, guarde la página y haga clic en Vista previa. En la página de vista previa, verá que al pasar el ratón por encima de la imagen, ésta produce elEfecto de subida y bajada ondulanteLa nueva versión del producto es una experiencia visual única y dinámica para el usuario.

Paso opcional: Ajuste de los parámetros del efecto

Los parámetros del efecto pueden ajustarse con precisión según los requisitos del diseño:

amplitud de onda: Mediante ajuste translateY() controla la magnitud del efecto de onda. Los valores más grandes producen ondas más pronunciadas.
Velocidad de animación: Ajustes animación La duración en el atributo (p. ej. 0.6s) puede controlar la velocidad del efecto de onda.
ángulo de rotación:: Cambio girar() ajusta el ángulo de rotación de la imagen.

Mayor optimización: añadir efectos de sombra

Para añadir profundidad al efecto, también puede añadir sombras al efecto hover para que la imagen parezca más tridimensional a medida que fluctúa.

.wave-hover img:hover {
  transform: translateY(-10px) rotate(2deg) scale(1.05);
  animación: onda 0,6s ease-in-out infinita;
  box-shadow: 0px 10px 15px rgba(0, 0, 0, 0, 0.2);
}

resúmenes

El efecto hover es un efecto dinámico popular en el diseño web que demuestra interactividad cuando el usuario pasa el ratón por encima de una imagen o un botón. El efecto wave hover simula el flujo y reflujo de una ola, dando a la imagen un efecto acuoso y dinámico cuando se pasa el ratón por encima. Este artículo describe cómo implementar este efecto en la biblioteca Elementor, incluyendo la configuración de una biblioteca de imágenes, la adición de nombres de clase personalizados, la escritura de código CSS de animación de olas y el ajuste de la magnitud, la velocidad y las sombras del efecto según sea necesario para hacer un sitio web más vivo y atractivo para los usuarios.

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres