Jak tworzyć: Parallax scrolling

Naucz się, jak używać CSS do tworzenia efektu 'parallax'.

Parallax scrolling

Parallax scrolling to jest trend w projektowaniu stron internetowych, gdzie ruch tła (np. obrazów) jest różny od ruchu pierwszoplanowego.

Przykład z efektem rozbieżności (parallax)

Przykład bez efektu rozbieżności (parallax)

Uwaga:Efekty rozbieżności (parallax) nie zawsze są efektywne na urządzeniach mobilnych/smartfonach. Ale możesz wyłączyć ten efekt na urządzeniach mobilnych za pomocą zapytań mediowych (zobacz ostatni przykład na tej stronie).

Jak tworzyć efekty rozbieżności (parallax)

Użyj elementu kontenera i dodaj do niego obraz o określonej wysokości. Następnie użyj background-attachment: fixed Tworzenie rzeczywistego efektu rozbieżności (parallax). Inne atrybuty tła są używane do wyśrodkowania i idealnego skalowania obrazu:

przykład w jednostkach pikseli

<style>
.parallax {
  /* Używane obrazy */
  background-image: url("img_parallax.jpg");
  /* Ustawienie konkretnej wysokości */
  min-height: 500px;
  /* Tworzenie efektu rozbieżności (parallax) */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
/* Element kontenera */
<div class="parallax"></div>

Spróbuj sam

Powyższy przykład używa pikseli do ustawienia wysokości obrazu. Jeśli chcesz użyć procentów, na przykład 100%, aby obraz pasował do całego ekranu, ustaw wysokość kontenera parallax na 100%. Uwaga: Musisz również ustawić height: 100% Zastosowanie do <html> i <body>:

przykład w jednostkach procentowych

body, html {
  height: 100%;
}
.parallax {
  /* Używane obrazy */
  background-image: url("img_parallax.jpg");
  /* Pełna wysokość */
  height: 100%;
  /* Tworzenie efektu rozbieżności (parallax) */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Spróbuj sam

Niektóre urządzenia mobilne używają background-attachment: fixed może napotkać problemy. Ale możesz wyłączyć efekt rozbieżności (parallax) na urządzeniach mobilnych za pomocą zapytań mediowych:

przykład

/* Wyłączyć wszystkie efekty rozbieżności (parallax) na tabletach i telefonach. Można zwiększyć lub zmniejszyć piksele, jeśli to konieczne */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

Spróbuj sam

W powyższym kodzie, gdy szerokość ekranu jest mniejsza lub równa 1366 pikselom, efekty rozbieżności (parallax) zostaną wyłączone, co jest odpowiednie dla większości tabletów i telefonów. To osiąga się poprzez zmianę .parallax klasy background-attachment atrybuty zaczynają się od ustalony do scroll W ten sposób, obraz tła będzie przewijał się razem z resztą strony, zamiast być umieszczony w polu widzenia.