Cómo crear un efecto parallax con CSS

Crea impacto en tu página de inicio con un efecto parallax con CSS.

El efecto parallax, el concepto de mover capas a diferentes velocidades, se ha utilizado durante años en la animación. El sitio web oficial de Bear Grylls (uno de nuestros sitios favoritos de efecto parallax ), toma el efecto en nuevas e interesantes direcciones. Las montañas de fondo se reducen a su posición, mientras que se desvanecen para que se vuelvan completamente opacas, y en el fondo de la página, el texto ‘aventura’ se eleva en su lugar detrás de las montañas a medida que se desvanece.

Puedes ver  en acción el efecto desde www.beargrylls.com . En este artículo, te voy a explicar cómo recrear el efecto en tu propia pagina web. Comienza por descargar los archivos del tutorial .

01. Crea el efecto de escalado.

La estructura para permitir que todo el contenido animado funcione es relativamente simple. Una envoltura contiene todo, y oculta cualquier contenido de desbordamiento. Luego hay esencialmente tres capas de etiquetas div en la parte superior.

<div class="wrapper">
	<div class="pos text"></div>
	<div class="pos mountain1"></div>
	<div class="pos mountain2"></div>
</div>

02. Inicia el CSS

Para hacer el diseño, la imagen de degradado de fondo se agregará al cuerpo (body) y se configurará para llenar el tamaño de la pantalla. La envoltura contiene todas las capas y el desbordamiento de contenido se oculta para que se puedan aplicar los efectos de escala.

body {
		margin: 0;
		padding: 0;
		height: 100%;
		background: url(img/bg.jpg) 
		center center;
		background-size: cover;
	}
	.wrapper {
		width: 100vw;
		height: 100vh;
		position: relative;
		overflow: hidden;
	}

03. Posiciona cada capa.

El siguiente código asegura que cada capa esté posicionada absolutamente, una sobre la otra, dentro de la envoltura. El tamaño de esto llena el ancho y el alto de la ventana gráfica de modo que las imágenes llenen la pantalla.

.pos {
		position: absolute;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
	}

04. Añadir el texto.

La clase de texto realmente solo agrega la imagen correcta y establece su posición de inicio antes de animarla en su lugar utilizando los fotogramas clave MoveUp que se agregarán en el paso final.

.text {
		background: url(img/text.png) 
		center center;
		background-size: cover;
		transform: translate3d(0, 30px, 0);
		opacity: 0;
		animation: moveUp 1.8s ease-out;
		animation-fill-mode: forwards;
	}

05. Animar la primera montaña.

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

.mountain1 {
		background: url(img/mountain1.png) 
		center center;
		background-size: cover;
		transform: scale3d(1.1, 1.1, 1.1);
		opacity: 0.2;
		animation: scaler 1s ease-out;
		animation-fill-mode: forwards;
	}

06. Animar la montaña de primer plano.

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

.mountain2 {
		background: url(img/mountain2.png) 
		center center;
		background-size: cover;
		transform: scale3d(1.3, 1.3, 1.3);
		opacity: 0.1;
		animation: scaler 1.2s ease-out;
		animation-fill-mode: forwards;
	}

07. Añadir animación de fotogramas clave

Ahora se crean los fotogramas clave que especifican eso. en el estado final del movimiento, este estado final se mantendrá en su lugar. El texto se mueve hacia arriba y las montañas se reducen para adaptarse al diseño.

@keyframes moveUp {
		100% {
			transform: translate3d(0, 0, 0);
			opacity: 1;
		}
	}

@keyframes scaler {
		100% {
			transform: scale3d(1, 1, 1);
			opacity: 1;
		}
}

Espero que te haya gustado este pequeño tutorial sobre el efecto parallax con CSS, sigue mi blog y todas las semanas traeré nuevos tutoriales sobre CSS.

Te recomiendo leer  10 Ejemplos de animaciones SVG para diseñadores web

Deja un comentario

Háblame ;)
¿Necesitas ayuda?
Hola! Necesitas ayuda? hablemos por WhatsApp :)