Jak na to - Paralaxní rolování
Naučte se, jak pomocí CSS vytvořit efekt posouvání „paralaxy“.
Paralaxa
Paralaxní rolování je trend webových stránek, kde se obsah na pozadí (tj. obrázek) při rolování přesouvá jinou rychlostí než obsah v popředí. Kliknutím na níže uvedené odkazy uvidíte rozdíl mezi webem s paralaxním rolováním a bez něj.
Poznámka: Paralaxní rolování nefunguje vždy na mobilních zařízeních/chytrých telefonech. K vypnutí efektu na mobilních zařízeních však můžete použít dotazy na média (viz poslední příklad na této stránce).
Jak vytvořit efekt posouvání paralaxy
Použijte prvek kontejneru a přidejte do kontejneru obrázek na pozadí s konkrétní výškou. Poté použijte background-attachment: fixed
k vytvoření skutečného efektu paralaxy. Další vlastnosti pozadí slouží k dokonalému vystředění a zmenšení obrázku:
Příklad s pixely
<style>
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Set
a specific height */
min-height: 500px;
/* Create the parallax scrolling effect */
background-attachment: fixed;
background-position:
center;
background-repeat: no-repeat;
background-size: cover;
}
</style>
<!-- Container element
-->
<div class="parallax"></div>
Výše uvedený příklad používal pixely k nastavení výšky obrázku. Pokud chcete použít procenta, například 100 %, aby se obraz vešel na celou obrazovku, nastavte výšku paralaxního kontejneru na 100 %. Poznámka: Musíte také použít height: 100%
pro <html> a <body>:
Příklad s procenty
body, html {
height: 100%;
}
.parallax {
/* The image used */
background-image: url("img_parallax.jpg");
/* Full height */
height: 100%;
/* Create the parallax
scrolling effect */
background-attachment: fixed;
background-position: center;
background-repeat:
no-repeat;
background-size: cover;
}
Některá mobilní zařízení mají problém s background-attachment: fixed
. Pomocí dotazů na média však můžete paralaxový efekt pro mobilní zařízení vypnout:
Příklad
/* Turn off parallax scrolling for all tablets and phones. Increase/decrease the pixels if
needed */
@media only screen and (max-device-width: 1366px) {
.parallax {
background-attachment: scroll;
}
}