10 fragmentos de CSS y JavaScript para crear el efecto de desplazamiento Parallax

Hay mucha confusión sobre el diseño de paralaje y cómo funciona en la web. En términos generales, el diseño de paralaje utiliza el movimiento para crear la ilusión de profundidad en una página.

Esto puede relacionarse con cambios de fondo o elementos de posición semifija que se mueven junto con el desplazamiento del usuario. Hemos cubierto muchos ejemplos de sitios web, pero no hemos entrado en detalles sobre las técnicas involucradas.

Para esta colección, elegí mis fragmentos de CSS y JavaScript favoritos para crear diseños de paralaje. Todos los ejemplos ofrecen código fuente gratuito, por lo que puede jugar con fragmentos e incluso usarlos en sus propios proyectos.

1. La gran caída de CJ Gammon

Este ejemplo de paralaje es una de las interfaces más singulares que he encontrado. Utiliza un script personalizado para crear un sprite en cascada que parece fluir sin cesar por la página. Se ha construido sobre elementos de lienzo controlados a través de JavaScript, por lo que es una configuración bastante técnica.

En su mayor parte, esto es un testimonio de lo que es posible en el desarrollo web moderno. Aprender el elemento del lienzo le da mucho control sobre su diseño.

Ver el Pen The Great Fall de CJ Gammon

2. CSS Scrolling Parallax por Sebastian Schepis

Aquí hay un efecto de paralaje más práctico con un fondo fijo y páginas más grandes en la parte superior. Cuando se desplaza, cada sección de la página aparece sobre el fondo. Esto crea la ilusión de profundidad y es uno de los elementos clave para un excelente diseño de paralaje.

El desarrollador Sebastian Schepis ha usado solo CSS para esta página y es un concepto bastante simple. Creo que cualquiera podría clonar esto con facilidad, sin mencionar que el diseño de fondo podría mejorarse mucho.

Vea el efecto de paralaje de desplazamiento Pen CSS de Sebastian Schepis

3. Simple Image Tag Parallax por Renan Breno

A menudo encontrará diseños de paralaje junto con grandes imágenes de fondo de pantalla completa. Estos son demasiado comunes en los sitios de empresas y en las empresas emergentes, donde generalmente presentan una cierta "velocidad de desplazamiento" de paralaje para el fondo.

La diferencia aquí no es tanto la rapidez con la que se desplaza hacia abajo en la página o el tamaño de la ubicación de la imagen. En cambio, verá qué tan rápido se mueve la imagen a través del fondo de la página mientras se desplaza. Es un efecto de paralaje sutil, pero este diseño es una excelente plantilla para ver las diferentes velocidades de animación en acción.

Vea la etiqueta Pen Simple Image Tag Parallax de Renan Breno

4. Fondos de paralaje e imágenes fijas

Los fondos de imagen fijos funcionan bien para dividir páginas y dividir secciones de contenido de manera uniforme. A medida que se desplaza, puede parecer que las secciones individuales de la página son más altas que las imágenes de fondo. Todo esto es por diseño para dar vida al efecto de paralaje mientras se desplaza.

No usaría este diseño exacto porque las áreas de contenido parecen un poco delgadas. Pero si te gusta este estilo, te recomiendo puntuar cada sección de la página con una imagen diferente relevante para tu sitio web.

Ver el Pen #Maincode Hackdays de chaobu

5. CSS Paralaje por Paulo Cunha

Este ejemplo de paralaje es un ejemplo único de cómo funcionan los efectos de paralaje. Todo el contenido de la página se encuentra debajo de una gran imagen de héroe que desaparece debajo del contenido al desplazarse. Esto también utiliza la posición fija de la imagen para que parezca que la página se mueve sobre la imagen, en lugar de que la imagen permanezca fija en su lugar.

Puede usar este mismo efecto con un diseño de desplazamiento largo y tendría un estilo de diseño similar. Esto funcionaría mejor para publicaciones de blog individuales con imágenes destacadas grandes o páginas de destino que usan héroes grandes para llamar la atención.

Ver el Pen CSS Parallax de Paulo Cunha

6. Diseño de paralaje por Katie Rogers

Aquí hay un diseño de paralaje interesante para una página de boda de muestra. Tiene un diseño de página dividida donde las imágenes separan las diferentes áreas de contenido con desplazamiento fijo de paralaje. Todo se ejecuta en CSS, que es un buen toque, y todas las imágenes de fondo permanecen fijas mientras se desplaza hacia abajo en la página.

Este efecto funciona porque las áreas de contenido tienen grandes sombras de cuadro que caen sobre los fondos. Naturalmente, esto crea la ilusión de profundidad al darle a la página una fuente de luz teórica y una jerarquía, una idea muy buena para un diseño de una sola página.

Vea el diseño Pen Parallax de Katie Rogers

7. Desplazamiento de paralaje de la imagen de fondo por Rich Howell

Anteriormente, mencioné cómo la velocidad de desplazamiento podría variar en función de la tasa de cambio de posición de fondo. Este ejemplo es la comparación perfecta para ver cómo funciona esto en acción.

Tenga en cuenta que necesitará usar la barra de desplazamiento para ver los efectos de este ejemplo. Probé con la rueda del mouse y no pude ver ninguna diferencia, pero notará cambios de velocidad en las columnas cuando mueva la barra de desplazamiento.

Ninguna de estas velocidades son representaciones incorrectas o inexactas del diseño de paralaje. Son solo métodos diferentes para crear movimiento en la página, y este pequeño ejemplo es una excelente manera de visualizar muchas opciones.

Vea el Paralax de la imagen de fondo con desplazamiento del lápiz por Rich Howell

8. Fondo de paralaje estrellado por Saransh Sinha

Si bien este efecto no se relaciona con el desplazamiento, se relaciona directamente con el diseño de paralaje. Utiliza CSS puro para crear una animación de estrella de paralaje en el fondo de la página. Puede agregar texto e incluso un área de contenido sobre la página, pero las estrellas crean profundidad inmediatamente a primera vista.

La animación se ejecuta a través de CSS, pero este fragmento usa Sass y Compass, por lo que sería útil comprenderlo antes de realizar ediciones.

Vea el fondo Pen Parallax Star en CSS por Saransh Sinha

9. Canvas Parallax Skyline por Jack Rugile

A veces, los diseños de paralaje también apuntan al movimiento del mouse junto con las funciones de desplazamiento. Este diseño de lienzo crea un efecto de horizonte infinito que reacciona al movimiento del mouse en la página. A medida que cambia la posición del mouse, el ángulo de visión se altera. Pero la animación sigue siendo la misma y puedes ver este horizonte moviéndose con una jerarquía visual clara.

Naturalmente, esto requiere JavaScript para la animación porque es una idea bastante compleja. Pero tampoco es algo que encontrará en muchos sitios web, por lo que tampoco es algo que copiará en su sitio. Pero como concepto de paralaje, este es realmente interesante.

Vea el Pen Canvas Parallax Skyline de Jack Rugile

10. Filtro de vidrio roto por Bajjy Xilo

He visto este efecto en sitios web antes, creando un diseño muy peculiar. El filtro de vidrio roto da la ilusión de que una imagen de fondo se divide en muchas partes diferentes. Casi parece que la imagen estaba en un panel de vidrio y se hizo añicos, fracturando la imagen y sesgando la imagen.

Puede replicar este efecto con CSS puro, y es uno de esos efectos geniales que es genial hacer pero que puede no tener ningún uso práctico en el mundo real más allá de los diseños elegantes. Aún así, este es un ejemplo impresionante de profundidad y movimiento de paralaje mientras se desplaza.

Ver el filtro css Pen BrokenGlass de Bajjy Xilo