Cómo crear un efecto de paralaje en capas en su sitio

Sep 12, 2025

Cómo

[dieciséis] (Crédito de la imagen: www.beargrylls.com)

El movimiento de paralaje, el concepto de capas móviles a diferentes velocidades, se ha utilizado durante años en animación. El sitio web oficial de Bear Grylls (uno de nuestros favoritos Sitios de desplazamiento de paralaje ), Toma el efecto en direcciones nuevas e interesantes. Las montañas de fondo se escalan en posición, mientras se desvanecen para que se vuelvan completamente opacas, y en el fondo de la página, la "aventura" del texto se eleva en su lugar detrás de las montañas mientras se desvanece.

Para obtener más efectos de movimiento inspiradores, echa un vistazo a nuestra guía de lo mejor. Animaciones CSS y cómo codificarlas. .

El diseño del sitio del oso Grylls es el trabajo de la agencia de marketing creativa del Reino Unido. Avanzada , y con una audiencia objetivo que va de 16 a 55 años de edad, y más de 7 millones de seguidores en todo el mundo, tenían una tarea seria en sus manos.

"La característica principal del sitio web fue la página de inicio; Queríamos que los visitantes saltaran literalmente a la pantalla y Únase a Bear en sus aventuras", explique el cofundador Chris Wilcock y el director creativo Dan Williams. "Para lograr esto, utilizamos algunas transiciones inteligentes, junto con videos editados, imágenes dramáticas y el idioma general en el sitio".

Ver el sitio en acción en www.beargrylls.com . En este artículo, explicaremos cómo recrear el efecto en sus propios sitios. Empieza por Descargando los archivos tutoriales .

01. Crea el efecto de escala.

La estructura para permitir que todo el contenido de animación funcione sea relativamente simple. Una envoltura sostiene todo, y oculta cualquier contenido de desbordamiento. Luego hay esencialmente tres capas de etiquetas Div en la parte superior.

 & lt; div clase = "wrapper" & gt;
& lt; div clase = "POS Text" & GT; / LT; / DIV & GT;
& lt; div clase = "POS Mountain1" & GT; / DIV & GT;
& lt; div clase = "POS Mountain2" & GT; / DIV & GT;
& lt; / DIV & GT;

02. Iniciar el CSS

Para hacer el diseño, la imagen de gradiente de fondo se agregará al cuerpo y se ajustará para llenar el tamaño de la pantalla. La envoltura sostiene todas las capas, y el desbordamiento para el contenido está oculto para que se puedan aplicar los efectos de escala.

 Cuerpo {
Margen: 0;
relleno: 0;
Altura: 100%;
Fondo: URL (img / bg.jpg)
centro central;
Tamaño de fondo: cubierta;
}
.wrapper {
Ancho: 100VW;
Altura: 100vh;
Posición: Relativo;
Desbordamiento: oculto;
}

03. Posicionar cada capa

El siguiente código garantiza que cada capa esté colocada absolutamente, una sobre la otra, dentro de la envoltura. El tamaño de esto llena el ancho y la altura de la vista, por lo que las imágenes llenan la pantalla.

 .pos {
Posición: Absoluto;
TOP: 0;
izquierda: 0;
Ancho: 100VW;
Altura: 100vh;
}

04. Añadir el texto

La clase de texto realmente simplemente agrega la imagen correcta y establece su posición de inicio antes de animarla en su lugar usando el ascender Los fotogramas clave que se agregarán en el paso final.

 .text {
Fondo: URL (img / text.png)
centro central;
Tamaño de fondo: cubierta;
Transformar: traducir3d (0, 30px, 0);
Opacidad: 0;
Animación: Moveup 1.8s facilidad;
Modo de relleno de animación: Delantero;
}

05. Animar la primera montaña.

La primera montaña es la más lejos de la pantalla, y esto obtendrá una pequeña escala que se animará. La opacidad de todas las capas también está baja para que aparezcan en su lugar.

 .Mountain1 {
Fondo: URL (img / mountain1.png)
centro central;
Tamaño de fondo: cubierta;
Transform: Scale3D (1.1, 1.1, 1.1);
Opacidad: 0.2;
Animación: Scaler 1s facilidad;
Modo de relleno de animación: Delantero;
}

06. Animar la montaña de primer plano.

La montaña para el primer plano es casi idéntica a la otra montaña, solo hace mucho más una escala. Ambas montañas comparten los fotogramas clave 'escalador' para su animación.

 .Mountain2 {
Fondo: URL (img / mountain2.png)
centro central;
Tamaño de fondo: cubierta;
Transformar: Scale3D (1.3, 1.3, 1.3);
Opacidad: 0.1;
Animación: Scaler 1.2s facilidad;
Modo de relleno de animación: Delantero;
}

07. Añadir animación de fotogramas clave

Los fotogramas clave ahora se crean que especifican que. Al final del estado del movimiento, este estado final se mantendrá en su lugar. Se trasladó el texto, y las montañas se reducen, para encajar en el diseño.

@keyframes Moverup {
100% {
Transformar: traducir3d (0, 0, 0);
Opacidad: 1;
}
}

@keyframes scaler {
100% {
Transform: Scale3D (1, 1, 1);
Opacidad: 1;
}
}

Este artículo fue publicado originalmente en el número 289 de Diseñador web - a la venta ahora . Suscríbete aquí .

Leer más:

Cómo agregar animación a SVG con CSS
DOS y no hacer para las encantadoras animaciones web
Cómo diseñar con formas CSS: una introducción

Cómo crear un efecto de paralaje en capas en su sitio

01. Crea el efecto de escala.

02. Iniciar el CSS

03. Posicionar cada capa

04. Añadir el texto

05. Animar la primera montaña.

06. Animar la montaña de primer plano.

07. Añadir animación de fotogramas clave

Cómo - Artículos más populares

Cómo hacer una aplicación de Apple Watch

Cómo animar con la biblioteca MO.JS

Cómo usar reaccionar resorte para animar componentes

Cómo combinar 3D y arte cómico en Zbrush

5 Nuevas características CSS calientes y cómo usarlas

Anatomía MasterClass: perfecciona tus figuras

Cómo administrar las clases CSS con JavaScript

Top consejos para refinar las técnicas de ilustración dibujado a mano

Categorías