W tym samouczku przyjrzymy się pięknemu efektowi przewijania paralaksy w najprostszy sposób, z nieruchomym tłem i przewijaną zawartością.

Pobierz pliki źródłowe Zobacz demo

Krótkie wprowadzenie

Paralaksa to efekt, w którym pozycja obiektu wydaje się być inna, patrząc z różnych pozycji. Ruch paralaksy, lub w naszym przypadku przewijanie paralaksy, daje nam złudzenie, że dwa obiekty na tej samej linii widzenia, ale w pewnej odległości między nimi, wydają się poruszać z różnymi prędkościami. Jeśli kiedykolwiek wyjrzałeś przez okno samochodu, jadąc autostradą z prędkością 100 km/h, zauważysz, że słupy elektryczne wydają się przemykać w szybkim tempie, podczas gdy góry w tle zdają się poruszać bardzo wolno , prawie na postoju. To jest ruch paralaksy w działaniu.

Jeśli chodzi o sieć, możemy wywołać efekt paralaksy na kontenerach, które mają nad nimi obrazy tła i tekst. W najprostszej postaci przewijanie paralaksy spowoduje normalne przewijanie treści, a tło pozostanie nieruchome. Piękno tej techniki w jej najprostszej formie polega na tym, że wymaga ona tylko CSS. Zagłębmy się.

Znaczniki i struktura

Gdybyś miał ustaloną witrynę, która nie odpowiadała, nie byłoby żadnych sztuczek, aby to osiągnąć. Jesteśmy jednak w dobie responsywnego projektowania stron internetowych, więc to nie wchodzi w grę. Nie bój się! Do dyspozycji mamy kilka fajnych CSS. Ale najpierw spójrz na niektóre znaczniki. Oznaczenia są proste — będziemy mieć naprzemienne sekcje tła/tekstu nagłówka i sections treści sections aby uzyskać maksymalny efekt. Oto jak to wygląda:

  

    
Spokojny
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Wzrastać
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  

    
Spokojna
  



  

    
Lorem Ipsum Dolor
    
Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  

Każda section z klasą parallax będzie zawierać nasze obrazy tła i tekst nagłówka, podczas gdy każda section z klasą content będzie prostymi sekcjami zawierającymi treść. Klasa container to płynny div o maksymalnej szerokości, dzięki czemu reakcja na to wszystko jest bardzo prosta. Przejdźmy teraz do CSS.

Stylizacja i działanie z CSS

Pierwszą kwestią, na którą należy zwrócić uwagę, jest to, że wszystkie moje obrazy tła mają width 1600 pikseli i height 600 pikseli. To pozwala mi ustawić sekcje paralaksy na stałą wysokość 600px. Jest w tym jednak coś więcej. Ponieważ nie chcę powtarzających się teł (używam dużych i pogrubionych obrazów), nie zawsze mogę oczekiwać, że użytkownicy będą mieć maksymalną szerokość (co pozwoli, aby obrazy tła były w pełnym widoku). Na szczęście dla nas możemy wykorzystać właściwość background-size CSS i ustawić ją na cover . Wymusza to, aby obraz tła zajmował całą dostępną przestrzeń poprzez proporcjonalne jej rozszerzenie. Musi być jednak poprzedzony prefiksem, aby uzyskać maksymalne wsparcie, więc pamiętaj o tym.

Jak dotąd tak dobrze, z wyjątkiem najważniejszej rzeczy. Potrzebujemy, aby nasz obraz tła pozostał na miejscu, podczas gdy nasza zawartość przewija się obok niego. Ponownie CSS ułatwia nam życie. Używamy właściwości background-attachment i ustawiamy ją na fixed . Prosty! Oto jak wygląda mój CSS, z kilkoma przykładowymi zapytaniami o media:

 /* ======================================================== =============
  STRUKTURA PODSTAWOWA
=========================================================== ========== */
.pojemnik {
  maksymalna szerokość: 960px;
  margines: 0 auto;
}
/* ======================================================== =============
  SEKCJE
=========================================================== ========== */
section.module:ostatnie dziecko {
  margines-dolny: 0;
}
sekcja.moduł h2 {
  margines-dolny: 40px;
  rodzina czcionek: "Roboto Slab", szeryf;
  rozmiar czcionki: 30px;
}
sekcja.moduł p {
  margines-dolny: 40px;
  rozmiar czcionki: 16px;
  grubość czcionki: 300;
}
sekcja.moduł p:ostatnie dziecko {
  margines-dolny: 0;
}
sekcja.moduł.treść {
  dopełnienie: 40px 0;
}
sekcja.moduł.paralaksa {
  wysokość: 600px;
  pozycja tła: 50% 50%;
  powtarzanie w tle: bez powtórzeń;
  załącznik w tle: naprawiony;
  rozmiar tła: okładka;
}
sekcja.moduł.paralaksy h1 {
  kolor: rgba(255, 255, 255, 0,8);
  rozmiar czcionki: 48px;
  wysokość linii: 600px;
  grubość czcionki: 700;
  wyrównanie tekstu: środek;
  transformacja tekstu: wielkie litery;
  cień tekstu: 0 0 10px rgba (0, 0, 0, 0,2);
}
sekcja.moduł.paralaksy-1 {
  obraz w tle: url(../img/demo/_small/1.jpg");
}
sekcja.moduł.paralaksa-2 {
  obraz w tle: url("../img/demo/_small/2.jpg");
}
sekcja.moduł.paralaksa-3 {
  obraz w tle: url("../img/demo/_small/3.jpg");
}

@media wszystkie i (min-szerokość: 600px) {
  sekcja.moduł h2 {
    rozmiar czcionki: 42px;
  }
  sekcja.moduł p {
    rozmiar czcionki: 20px;
  }
  sekcja.moduł.paralaksy h1 {
    rozmiar czcionki: 96px;
  }
}
@media wszystkie i (min-szerokość: 960px) {
  sekcja.moduł.paralaksy h1 {
    rozmiar czcionki: 160px;
  }
}

Obsługa przeglądarek i informacje o właściwościach

Ogólnie obsługa przeglądarek jest naprawdę świetna. IE8 i down nie obsługują właściwości background-size , ale prosty styl warunkowy powinien o to zadbać. Poza tym wszystko jest obsługiwane i nie powinieneś mieć żadnych problemów. Aby uzyskać więcej informacji na temat właściwości CSS używanych w tym samouczku, sprawdź MDN:

• Pozycja w tle — odniesienie do MDN
• Rozmiar tła — odniesienie do MDN
• Załącznik w tle – odniesienie do MDN

Zakończyć

Tutaj zaimplementowaliśmy coś, co jest proste, skuteczne i nieco inne niż zwykły wygląd typu „wszystko przewijane na raz”. Wykorzystaliśmy kilka fajnych, ale mniej znanych technik CSS, aby osiągnąć pożądany efekt. I to jest okład! Nie zapomnij, że możesz wyświetlić demo i pobrać źródło, klikając poniższe linki, a jeśli masz pytania, komentarze lub opinie, możesz je również zostawić poniżej.