Jak stworzyć efekt paralaksy w CSS

Paralaksa jest jednym z najbardziej popularnych efektów w designie webowym. Polega na tym, że ​​podczas przewijania strony w dół zdjęcia na pierwszym planie poruszają się trochę wolniej w porównaniu do tła. W ten sposób tworzy się poczucie głębi i strona ma bardziej dynamiczny wygląd.

Paralaksą można stosować zarówno dla oddzielnych zdjęć lub całego układu strony. Jest to dość uniwersalne rozwiązanie dla każdego projektu. Spójrz na poniższe przykłady:

Intacto

Oto doskonały przykład interaktywnej osi czasu na stronie. Wygląda całkiem dynamicznie i jest doskonałym rozwiązaniem dla sekcji "O nas".

Graphicnovel

Sketch jak na stronie Peugeot jest kolejną doskonałą alternatywą do promowania nowych produktów. Firma stworzyła opowiadanie do prezentacji i promowania swojego produktu.

SoleilNoel

Atrakcyjna i jednocześnie szybka strona z efektem płynnego paralaksowego przewijania. Taki układ będzie idealnie pasował do strony portfolio i strondocelowych.

Fajnie wygląda, prawda? Więc przejdźmy do omówienia w jaki sposób można stworzyć taki sam efekt i dodać go do dowolnej strony. Istnieje 2 sposoby na stworzenie efektu paralaksowego przewijania - za pomocą JavaScript i na podstawie czystego CSS.

Więc na czym polega różnica?

Cóż, trzeba przyznać, że nie zobaczycie wielkiej różnicy na pojedynczym zdjęciu. Strony, które posiadają multi-paralaksowe przewijanie oprate o jQuery, ładują się znacznie wolniej. W tym samym czasie, paralaksę opratą o CSS jest trudniej dostosować pod kątem przeglądarki.

Przede wszystkim, musimy określić HTML strukturę strony. Pierwszy blok będzie zawierał zdjęcie, drugi - pewne treści, aby efekt paralaksy wyglądał bardziej wyraźnie.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

<div class="parallax_section parallax_image_first">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
<div class="content_block">
  <div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
</div>
<div class="parallax_section parallax_image_second">
  <div class="center">
    <article>Some text  </article>
    </div>
  </div>
<!--Block with content--> 
 
<div class="content_block">
 
<div class="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sit amet tempor lorem. Proin egestas sagittis orci sit amet ultricies. Etiam nec pharetra justo, scelerisque scelerisque elit. Nam pretium purus eu neque pretium accumsan. Proin eget pulvinar dui. Vestibulum nulla magna, auctor quis mollis eget, hendrerit nec enim. Nam commodo feugiat metus, ac auctor mi. Quisque sed ante eget arcu sollicitudin sodales nec nec nunc.</div>
 
</div>

Teraz przejdźmy do pliku CSS. Musimy dostosować sekcję .parallax_section. Trzeba określić jej wysokość i dostosować inne atrybuty, takie jak tło, położenie i rozmiar. W moim przypadku będzie ona miała następujący wygląd:

1
2
3
4
5
6
7
8

.parallax_section{
	height: 600px;
  	background-repeat: no-repeat;
  	background-attachment: fixed;
  	background-size: cover;
  	background-position: 100% auto;
		position:relative;
}

Teraz trzeba dodać zdjęcie. Aby to zrobić użyłam selektora – .parallax_image_first.

1
2
3

.parallax_image_first{
	 background-image: url("../images/del/diagonal_background.jpg");
}

A teraz dodajmy stylów do tekstu na zdjęciu.

1
2
3
4
5
6
7
8
9

    font-size: 60px;
    position: absolute;
    top: 50%;
    margin-top: -15px;
    left: 0;
    right: 0;
    text-align: center;
    font-weight: 600;
    color: #fff;

W rezultacie otrzymamy:

DEMO POBIERZ

Paralaksa z pomocą JavaScript

Teraz zobaczmy jak stworzyć paralaksowe przewijanie z pomocą JavaScript. Do tego użyjemy gotową wtyczkę jQuary z pixelcog.com. To jest jedną z najprostszych wtyczek, z którymi pracowałam. Aby działała, trzeba pobrać bibliotekę JQ. Skopiuj plik parallax.min do projektu i dodać go do kodu html.

Teraz musimy dodać zdjęcie. Do tego należy użyć gotowy kod. Wpisz go w pliku CSS.

1
2
3
4

.parallax-window {
    min-height: 400px;
    background: transparent;
}

Można także zmienić opcje zdjęcia bezpośrednio w kodzie HTML. Aby to zrobić musimy dodać teleinformatyczny prefiks do zmiennej i wpisać go w dolnej części.

Na przykład, musimy zmienić prędkość przewijania. Do tego dodamy dane prędkości data-speed=”0.8” do html .

DEMO POBIERZ

* * *

Ten artykuł został przetłumaczony z angielskiego. Oryginał można znaleźć tutaj: How to Create Parallax Effect with Pure CSS.

* * *

P.S. Istnieje też mnóstwo innych paralaksowych skryptów w Internecie, daj nam znać, który z nich podoba Ci się najbardziej . Podziel się swoimi pomysłami w komentarzach!