Cómo crear el efecto hover scroll con CSS en Elementor
Primero, antes de comenzar tenemos que saber que para crear esto necesitaremos tener activado la licencia de Elementor Pro, ya que este nos permite usar la herramienta CSS Personalizado, y sin este no podremos hacer nada.
Una vez aclarado esto, veamos como se ve el efecto:
Configuración de sección
Primero, tenemos que dejar el terreno listo para que todo funcione correctamente, es por eso que crearemos una sección donde ira el efecto.
Nos iremos a «Disposición» y haremos los siguientes ajustes:
- Ancho de contenido: Caja
- Espacio entre columnas: Sin espacio
- Alto: Altura mínima, y lo dejamos según queramos, en mi caso será en 700
- Posición de columna: Estirar
Una vez hecho estos seleccionaremos la columna y nos iremos a «Estilo», y colocaremos nuestra imagen de fondo que queramos darle el efecto scroll. Si aún no sabes cómo cambiar una imagen de fondo de un bloque te dejo acá un tutorial rápido.
Y por último colocaremos un espaciador en la columna para que la imagen se pueda visualizar.
Integración de CSS
Seleccionaremos nuevamente la Sección general y nos iremos a «Avanzado», acá seleccionaremos «CSS Personalizado» y agregaremos el siguiente código:
selector .elementor-column-wrap {
background-repeat: no-repeat;
background-size: cover;
background-position: center top;
transition: all 4s !important;
}
selector .elementor-column-wrap:hover {
background-position: center bottom;
}
Es importante que sepas que la linea 5 «transition: all 4s !important;», coloques el tiempo que deseas que dure la transición del efecto, de este dependera si el movimiento scroll será lento o rápido.
¡Listo! ya sabes como crear el efecto hover scroll para tu página web, este efecto es muy bueno para las personas que desean crear un portafolio de imágenes muy largas o quieran darle esa experiencia de usuario única.
Espero que haya sido de mucha ayuda este tutorial sobre Elementor, si te quedo una duda o tienes alguna pregunta que hacerme, tienes la caja de comentarios para hacerlo, estaré gustoso de responderte.
De cualquier manera, eso seria todo por ahora, muchas gracias por leer y ¡CHAU CHAU!
11 respuestas
Excelente tutorial Smith, me gustaria que hagas uno de tu header, me encanta tu estilo.
Saludos.
¡Muchas gracias Fernando! Pronto estaré haciendo mostrando como hice el header, junto con su CSS claro 😉
¡Un abrazo!
Hola Smith, excelente y resumido tutorial, me sirve pero hace mucho tiempo que estoy investigando la manera de crear un Header con el efecto como el de tu web con CSS y la verdad es que no he dado con el material correcto. ¿Puedes compartir ese efecto? Muchas Gracias
Hola, Julian
Claro, puedo crear un tutorial de como realizarlo.
En este caso se usa CSS y JS, pero no es complicado
Me gustaría saber si estás interesado más en un artículo explicando cómo realizarlo o prefieres un videotutorial mostrando
Muy bueno! Justo me envió un compañero tu artículo ya que tenía un plugin solo para ese efecto. Muchas gracias por la aportación!
¡Que genial que te haya servido Carolina!
Un saludo
Hola haha si fui yo que lo encontré chafardeando cuentas de el grupo de facebook elementor y me encanto este efecto, felicidades
Gracias Kike! un placer haber ayudado a la comunidad
hola, existe alguna manera de hacerle ese efecto al contenido de una tabla
Hola Omar, no es posible hacerlo solo con CSS, pero con JavaScript sí.
gracias