Agregar Scrolling suave con animaciones de imagen a una web

Un tutorial sobre cómo agregar un efecto de desplazamiento suave a un sitio web y también animar las imágenes que ingresan a la ventana gráfica.

Hoy queremos mostrarle cómo agregar un desplazamiento suave en HTML con algunas animaciones sutiles adicionales en las imágenes. Con el desplazamiento suave no nos referimos a un desplazamiento suave hacia un elemento, sino a un tipo de comportamiento de desplazamiento suave y animado. Hay muchos ejemplos hermosos de un comportamiento de desplazamiento suave en algunos sitios web recientes, como Elena Iv-skaya, Ada Sokól y el impresionante sitio de Rafal Bojar, y muchos otros. Este último también tiene una animación de imagen muy agradable que se sincroniza con el desplazamiento. Este tipo de animación de imagen interna agrega otra capa interesante a todo el movimiento de desplazamiento.

¿Por qué este tipo de desplazamiento suave es algo que te gustaría agregar a una página web? Si alguna vez ha animado algo en el desplazamiento, puede haber experimentado que los navegadores tienen dificultades para mostrar el contenido entrante sin jank; Especialmente las imágenes pueden mostrar pequeños saltos abruptos en el desplazamiento. Simplemente se siente fácil en el ojo. Para evitar eso, podemos usar el truco de animar el contenido mismo al traducirlo hacia arriba o hacia abajo en lugar de usar el desplazamiento nativo.

Desplazamiento suave

Jesper Landberg creó algunas demostraciones realmente geniales de Codepen que muestran cómo se puede aplicar el desplazamiento suave a diferentes escenarios. La demostración de desplazamiento suave con efecto de sesgo muestra cómo agregar un efecto de sesgo a las imágenes mientras se desplaza (suave). Aquí también puede ver cómo funciona el desplazamiento suave con la traducción del contenido: una envoltura de contenido se establece en una posición fija con el desbordamiento configurado en oculto para que su hijo pueda moverse. El cuerpo obtendrá la altura del contenido configurado, de modo que conservemos la barra de desplazamiento. Cuando nos desplazamos, el contenedor fijo permanecerá en su lugar mientras animamos el contenido interno. Este truco hace posible un comportamiento de desplazamiento suave simple pero efectivo.

En nuestro ejemplo usaremos la siguiente estructura:

…Para leer más, siga el link del idioma que prefiera