• Home
  • Wordpress
  • Dodaj w 5 minut efekt Parallax do swojej strony na WordPressie

Dodaj w 5 minut efekt Parallax do swojej strony na WordPressie

Efekt parallax to popularny w ostatnich latach sposób na animację tła oraz tekstu na nim przy czym tekst będzie przesuwał się wraz ze scrollowaniem strony wolniej, niż elementy na pierwszym tle nadając efekt głębi.

Parallaxy używane są często na stronach typu landing page, stronach sprzedażowych, witrynach firmowych oraz na stronach wpisów. Są świetnym elementem podkreślającym zróżnicowanie wizualne pomiędzy podstronami.

Choć są one domyślnie wbudowane w znaczącą ilość płatnych szablonów, ich wdrożenie na szablon nie obsługujący efekt parallax jest prostsze, niż myślisz.

Metoda pierwsza – dodanie efektu parallax za pomocą wtyczki

Ta metoda nie wymaga od Ciebie edycji kodu źródłowego strony, dlatego jest zalecana dla mniej zaawansowanych użytkowników. Aby skorzystać z tej metody powinieneś zainstalować wtyczkę Advanced WordPress Backgrounds, która dostępna jest w oficjalnym repozytorium WordPressa. Po zainstalowaniu oraz aktywacji wtyczki w panelu edycji postu oraz podstrony powinieneś w edytorze wizualnym odnaleźć nową ikonę – Advanced WordPress Backgrounds. Po kliknięciu na nią wyświetli się nowy panel, w którym będziesz mógł wybrać tło, oraz prędkość animacji przy scrollowaniu strony. Po zapisaniu efektu możesz zapisać podstronę lub wpis, a następnie podejrzeć efekt.

Metoda druga – uruchomienie efektu parallax z użyciem arkusza CSS

Sposób ten polecany jest bardziej doświadczonym użytkownikom, bowiem wymaga edycji arkusza CSS. Na początku powinniśmy dodać zdjęcie w zakładce Media -> Dodaj nowy, którą odnaleźć można w panelu administracyjnym WordPressa. Po wgraniu zdjęcia, które posłuży nam za tło zapisujemy jego adres URL, a następnie otwieramy otwieramy wybrany plik wykorzystywanego motywu wizualnego lub motyw potomny, a następnie wpisujemy:

<div class="parallax">
<div class="parallax-content">
 
Treść, która wyświetlać się będzie na efekcie parallax
 
</div>
</div>

W miejsce, w którym pojawić ma się efekt. Zamiast przykładowego tekstu w powyższym kodzie możesz wprowadzić swój własny. Następnym etapem jest wprowadzenie nowego stylu w arkuszu CSS:

.parallax {  
background-image: url(„LINK DO ZDJĘCIA");
height: 100%; 
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left:-410px;
margin-right:-410px;
}
 
.parallax-content { 
width:50%;
margin:0 auto;
color:#FFF;
padding-top:50px; 
}

 

Skopiowany wcześniej link do zdjęcia umieszczamy w drugiej linii powyższego kodu. Po zapisaniu edytowanych plików zmiany powinny być widoczne na stronie.

Tags:, ,

2
Dodaj komentarz

avatar
2 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
2 Comment authors
KatarzynaKamil Recent comment authors
  Subscribe  
najnowszy najstarszy oceniany
Powiadom o
Kamil
Gość
Kamil

„otwieramy wybrany plik wykorzystywanego motywu wizualnego lub motyw potomny” – poproszę o nazwę pliku.

Katarzyna
Gość
Katarzyna

a co jeśli wtyczka jest aktywowana, ale nie wyświetla się w menu. Ten tutorial w ogóle tego nie przewiduje.

Facebook - LH.pl

Page plugin Facebook nie działa poprawnie. Proszę włączyć śledzenie w ustawieniach przeglądarki.