Efecto de scroll sobre una imagen

movimiento | scroll | portfolio

En este tutorial vamos a crear un efecto de scroll (movimiento arriba y abajo) cuando se pasa el ratón sobre una imagen. Es muy útil para presentar imágenes alargadas como de una página web.

Crear bloque

Primero creamos un bloque y le damos un nombre de clase al contenedor. Vamos a utilizar "imagen-scroll".

Podemos utilizar un bloque con dos columnas, y posteriormente añadir más columnas si queremos.

Añadir imagen a la columna

Como fondo de la columna añadimos una imagen. Asegúrate de que la imagen esté en posición Centrada Arriba.

Consejo: si la imagen y el fondo de la página tienen colores similares, te recomiendo añadir una sombra a la columna o bien darle al bloque un color de fondo para contrastar.

Insertar CSS

.image-scroll .grid-column-with-bg.has-bg-image {
  transition: background-position 1.5s linear 0.5s;
}
.image-scroll .grid-column-with-bg.has-bg-image:hover {
  background-position: bottom center!important;
  transition: background-position 10s linear 0s;
}

Dependiendo de la altura de las imágenes, es posible que quieras ajustar la velocidad de desplazamiento. Puedes ajustar la velocidad del efecto de desplazamiento modificando las propiedades de transición.

La primera regla de estilo controla el efecto de desplazamiento de vuelta a la parte superior cuando el usuario deja de pasar el ratón por encima de la imagen.

El segundo valor de la propiedad de transición (1,5s) determina el tiempo, en segundos, que tardará la imagen en volver a la parte superior. El último valor (0,5s) controla el tiempo de retardo antes de iniciar el efecto de desplazamiento.

La segunda regla de estilo controla el efecto de desplazamiento al pasar el ratón por encima utilizando la pseudoclase :hover. Al igual que la primera regla de estilo, la propiedad de transición controla la duración y el retardo del efecto.

Para esta demo, he utilizado el valor de duración de 10s, lo que significa que tardará 10 segundos en desplazarse hasta la parte inferior de la imagen. Si tu imagen es más corta que la utilizada en el ejemplo, probablemente funcione mejor un valor menor.

También verás que he establecido el retardo de transición en 0s. Esto significa que no habrá retardo en el inicio del desplazamiento cuando el usuario pase el ratón por encima de la imagen.

En nuestro Portfolio puedes ver el resultado:

https://multibuilder.es/portfolio/sitio-web-coworking

Última actualización