Efekt Parallax podczas przewijania strony

Czym jest efekt parallax?

W skrócie efekt parallax polega na tym, że kawałek strony przesuwa się z inną prędkością niż pozostałe dając wrażenie trójwymiarowości. W tym wpisie wytłumaczę Ci jak w prosty sposób uzyskać taki efekt i zastosować go na swoich stronach od zaraz. Użyjemy w tym celu HTML’a i CSS. Przejdźmy teraz do pisania kodu 🙂

Struktura HTML:

<section class="module parallax parallax-1">
  <div class="container">
    <h1>Sekcja 1</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>

<section class="module parallax parallax-2">
  <div class="container">
    <h1>Sekcja 2</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>

<section class="module parallax parallax-3">
  <div class="container">
    <h1>Sekcja 3</h1>
  </div>
</section>

<section class="module content">
  <div class="container">
    <h2>Lorem Ipsum</h2>
     <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
  </div>
</section>

Na pierwszy rzut oka można zauważyć że występują dwa rodzaje sekcji na przemian się przeplatające. W pierwszej występuje wspólna dla obu sekcji klasa .module oraz unikalne klasy .parallax oraz .parallax-(1-3).  W drugiej sekcji występuje wspólna klasa .module oraz unikalna klasa .content. W każdej z sekcji występuje div o klasie .container zawierający nagłówek oraz akapit.

Style CSS:

.container {
  max-width: 1000px;
  margin: 0 auto;
}

section.module h2 {
  margin-bottom: 20px;
  font-size: 30px;
  color: rgba(204,204,204,1);
}

section.module p {
  margin-bottom: 40px;
  font-size: 24px;
  font-weight: 300;
  line-height: 28px;	
}

section.module p:last-child {
  margin-bottom: 0;
}

section.module.content {
  padding: 60px 0;
  text-align: left;
}

section.module.parallax {
  height: 800px;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
}

section.module.parallax h1 {
  color: rgba(255, 255, 255, 0.7);
  font-size: 48px;
  line-height: 800px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  text-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}

section.module.parallax-1 {
  background-image: url(obrazek1.jpg);
}

section.module.parallax-2 {
  background-image: url(obrazek2.jpg);
}

section.module.parallax-3 {
  background-image: url(obrazek3.jpg);
}

Pierwsza reguła ustala nadaje elementom z klasą .container max-width równą 1000px i wyśrodkowuje ją – powoduje to wyśrodkowanie kontenerów div i sprawia, że strona jest bardziej przejrzysta. Kolejne trzy reguły mają zastosowanie kosmetyczne oraz odnoszą się do wyświetlania tekstu i nie mają wpływu na efekt parallax.

Reguła section.module.content nadaje co drugiej sekcji padding z góry i z dołu oraz wyrównuje tekst do lewej strony.

Kolejna reguła  section.module.parallax jest najważniejszą regułą, jeśli chcemy uzyskać efekt parallax. Oprócz zdefiniowanej wysokości kontenera, znajdują się tutaj cztery właściwości tła. Pierwsza właściwość background-position określa pozycję tła od lewej i od górnej krawędzi kontenera. Wartości 50% 50% nie są wymagane. Ja użyłem takich, ponieważ obrazki, z których skorzystałem dobrze się prezentowały w takim akurat ustawieniu. W kolejnej linii ustawiamy brak powtarzalności tła. Następna własność to background-attachment ustawiony na fixed. Oznacza to, że tło (które za chwilę przypiszemy) ma stałą pozycję, niezależną od scrollowania i to jest właśnie linijka, która sprawia, że efekt parallax działa. Ostatnia własność background-size ustawiona na cover skaluje obrazek w zależności od rozdzielczości.

Kolejna reguła dotyczy nagłówka h1 i ma za zadanie nadać temu elementowi odpowiedni wygląd i pozycję.

Następne trzy reguły to proste podłożenie tła do trzech sekcji. Wszystko działa już poprawnie, ale dodajmy jeszcze kilka reguł media-queries aby wszystko wyglądało dobrze pod każdą rozdzielczością. Umieść ten kod zaraz pod ostatnią regułą CSS lub w oddzielnym pliku:

@media all and (min-width: 600px) {
    section.module h2 {
    font-size: 38px;
    }

    section.module a {
    font-size: 22px;
    }

    section.module.parallax h1 {
    font-size: 82px;
    }

}

@media all and (min-width: 960px) {
    section.module.parallax h1 {
    font-size: 145px;
    }
}

@media all and (max-width: 680px) {
     section.module.content {
     text-align: center;
     }
}

 

I to tyle! Uzyskaliśmy efekt, o który nam chodziło 🙂

Zobacz przykład tutaj.

Spodobał Ci się artykuł? Dzięki naciśnięciu serduszka poniżej będę wiedział jakie treści tworzyć. Dzięki! :)

Błyskawiczne pisanie kodu HTML z Emmet 7 złych praktyk CSS, których musisz unikać Wysuwane boczne menu
View Comments
  • Wiem, że odgrzebuję bardzo stary wątek, ale próbuję uzyskać ten efekt za pomocą samego HTML i CSS. Wszystko działa, ale na górze nad pierwszym obrazkiem mam biały pasek. Jak się go pozbyć. Przekopiowałem już nawet na chama źródło strony demo i po odpaleniu u siebie dalej mam taki nieładny biały pasek nad fotami. Jak się togo pozbyć?

    • Musisz zresetować domyślne zachowania przeglądarki, html, body, div, span, applet, object, iframe,
      h1, h2, h3, h4, h5, h6, p, blockquote, pre,
      a, abbr, acronym, address, big, cite, code,
      del, dfn, em, img, ins, kbd, q, s, samp,
      small, strike, strong, sub, sup, tt, var,
      b, u, i, center,
      dl, dt, dd, ol, ul, li,
      fieldset, form, label, legend,
      table, caption, tbody, tfoot, thead, tr, th, td,
      article, aside, canvas, details, embed,
      figure, figcaption, footer, header, hgroup,
      menu, nav, output, ruby, section, summary,
      time, mark, audio, video {
      margin: 0;
      padding: 0;
      border: 0;
      font-size: 100%;
      font: inherit;
      vertical-align: baseline; }

      /* HTML5 display-role reset for older browsers */
      article, aside, details, figcaption, figure,
      footer, header, hgroup, menu, nav, section {
      display: block; }

      body {
      line-height: 1; }

      ol, ul {
      list-style: none; }

      blockquote, q {
      quotes: none; }

      blockquote:before, blockquote:after,
      q:before, q:after {
      content: ”;
      content: none; }

      table {
      border-collapse: collapse;
      border-spacing: 0; }

      img {
      width: 100%;
      height: 100%; }