STM Projects

Página de muestra del efecto parallax

Explicación del código en https://sergiotoca.com/category/programacion/efecto-parallax/

PARALLAX SIMPLE

El Parallax simple se logra mediante un 'background-attachment: fixed'. Mientras tanto, el resto del contenido se mueve libremente mediante el scroll de la página.

PARALLAX MEJORADO

Con este efecto mejorado. Al hacer scroll arriba y abajo, el fondo de la capa se mueve proporcionalmente, con lo que realmente tenemos la sensación del efecto parallax.

PARALLAX REAL

Las diferentes capas responden con diferentes proporciones al movimiento del puntero, lo que aumenta la sensación de perspectiva buscada por Parallax.

EFECTOS ADICIONALES

Apariciones fade de elementos

Vamos a empezar con 'fades', los cuales se pueden hacer con movimiento o sin él al final.

Aparición de elementos mediante slides

Seguimos con los efectos 'sliders'. Es decir, con elementos que aparecen desde los bordes de la página.

Por un lado, vamos a hacer un slider automático, y por otro, uno que avance conjuntamente al scrolling de la página.

EL BOTON 'GoToTop'

Es común en las páginas actuales que aparezca un botón en la zona inferior derecha de la ventana del navegador.

Sirve para ir automáticamente al inicio de la página.

Su posición no es aleatoria, es el lugar donde menos entorpece la lectura del texto.

CONCLUSIONES

Hasta aquí ha llegado el ejemplo de los diferentes efectos que podemos emplear en un parallax ("Son todos los que están, pero no están todos los que son"). Digamos que es una puerta abierta a un estudio más profundo, que nos permita mejorar el front-end de nuestro sitio web.

A partir de aquí, es el gusto y el criterio de cada uno el que limitará o ampliará las opciones que aquí se han esbozado.

Para los detalles del código, clicar en https://sergiotoca.com/category/programacion/efecto-parallax/.

Atentamente,

Arriba