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.
Insertar CSS
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:
Última actualización