Jak vytvořit vrstvený efekt paralaxy

Vytvořte dojem na své domovské stránce pomocí pohybových efektů.

01. Vytvoření efektu změny velikosti

Struktura, která umožňuje fungování veškerého animovaného obsahu, je poměrně jednoduchá. Obálka pojme vše a skryje veškerý přetékající obsah. Pak jsou v podstatě tři vrstvy tagů div nahoře.

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

02. Spusťte nástroj CSS

Pro vytvoření návrhu bude obrázek přechodu pozadí přidán do těla a nastaven tak, aby vyplnil velikost obrazovky. Obálka pojme všechny vrstvy a přetečení obsahu je skryté, aby bylo možné aplikovat efekty změny velikosti.

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. Umístěte každou vrstvu

Další kód zajišťuje, že každá vrstva je umístěna absolutně, jedna přes druhou, uvnitř obálky. Velikost vyplní šířku a výšku výřezu, takže obrazy vyplní celou obrazovku.

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

04. Přidejte text

Textová třída ve skutečnosti pouze přidá správný obrázek a nastaví jeho počáteční pozici před jeho animací na místo pomocí klíčových snímků moveUp, které budou přidány v posledním kroku.

.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. Animujte první horu

První hora je ta vzdálenější od obrazovky a tím se získá malé měřítko, které se bude animovat. Krytí všech vrstev je také nastaveno na nízkou hodnotu, aby se zobrazily na místě.

.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. Animace hory v popředí

Hora v popředí je téměř identická s druhou horou – jen dělá mnohem více měřítka na místě. Obě hory sdílejí klíčové snímky pro svou animaci s měřítkem.

.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. Přidejte animaci klíčových snímků

Nyní jsou vytvořeny klíčové snímky, které to určují. V konečném stavu pohybu bude tento konečný stav udržován na místě. Text se posune nahoru a hory se zmenší, aby se vešel do návrhu.

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

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