Nagłówek zmieniający kolor po przewinięciu strony: gotowy kod do WordPressa
Przezroczysty nagłówek nałożony na dużą sekcję startową może wyglądać bardzo nowocześnie. Problem pojawia się jednak po przewinięciu strony. Jasne logo i białe linki mogą stać się słabo widoczne na jasnym tle kolejnych sekcji.
Rozwiązaniem jest nagłówek zmieniający kolor po przewinięciu strony. Na początku pozostaje przezroczysty, a po przesunięciu strony otrzymuje pełne tło, ciemniejszy tekst, mniejszą wysokość i delikatny cień.
W tym wpisie znajdziesz kompletny kod do WordPressa, który tworzy taki efekt. Najważniejsze ustawienia zostały zebrane w jednym miejscu, aby można było łatwo podmienić logo, kolory, linki, wysokość nagłówka i moment rozpoczęcia animacji.
Co dokładnie robi przygotowany kod?
Kod tworzy kompletny nagłówek wyświetlany przez shortcode: [sws_naglowek_scroll].
Przed przewinięciem nagłówek może być przezroczysty i korzystać z białego logo oraz jasnych linków. Po przekroczeniu określonej liczby pikseli automatycznie zmienia swój wygląd.
- zmienia kolor tła,
- zmienia kolor logo tekstowego i linków,
- może przełączyć jasną wersję logo na ciemną,
- zmniejsza wysokość nagłówka,
- dodaje delikatny cień,
- pozostaje widoczny przy górnej krawędzi ekranu,
- na telefonie zmienia się w menu hamburgerowe.
Użytkownik otwiera stronę i widzi przezroczyste menu na tle dużego zdjęcia. Gdy zaczyna przewijać stronę, nagłówek staje się mniejszy i otrzymuje pełne tło, dzięki czemu linki pozostają czytelne na każdej sekcji.
Jak podmienić logo?
Kod pozwala użyć logo tekstowego albo dwóch wersji logo graficznego. Jeżeli pola z adresami obrazków pozostaną puste, wyświetlony zostanie tekst zapisany w ustawieniu logo_tekst.
'logo_url_start' => 'https://twoja-strona.pl/logo-biale.png'
'logo_url_scroll' => 'https://twoja-strona.pl/logo-ciemne.png'
Jeśli podasz tylko pierwsze logo, ta sama grafika zostanie użyta również po przewinięciu.
Jak zmienić kolory?
Początek strony
kolor_tla_start: transparent
kolor_tekstu_start: #ffffff
Po przewinięciu
kolor_tla_scroll: #ffffff
kolor_tekstu_scroll: #111111
Dodatkowy kolor akcentu odpowiada za przycisk, podkreślenia linków i elementy aktywne.
Jak ustawić moment zmiany nagłówka?
Ustawienie prog_przewiniecia określa, po ilu pikselach nagłówek ma przejść do drugiego wyglądu.
'prog_przewiniecia' => 80
Jak zmienić wysokość nagłówka?
- wysokosc_pc_start: wysokość na początku strony,
- wysokosc_pc_scroll: wysokość po przewinięciu,
- wysokosc_mobile_start: wysokość początkowa na telefonie,
- wysokosc_mobile_scroll: wysokość mobilna po przewinięciu.
Jak zmienić linki i przycisk?
Linki znajdują się w tablicy pozycje_menu. Każdy element posiada nazwę widoczną w menu oraz adres docelowy.
array( 'nazwa' => 'Usługi', 'link' => '/uslugi/' )
Tekst i adres przycisku zmienisz w ustawieniach tekst_przycisku oraz link_przycisku.
Gotowy kod nagłówka zmieniającego kolor
Kod dodaj jako nowy fragment PHP we wtyczce Code Snippets. Najpierw podmień ustawienia w sekcji oznaczonej komentarzem „EDYTUJ TYLKO TEN FRAGMENT”.
Wykonaj kopię zapasową strony. Po aktywacji sprawdź nagłówek na komputerze, tablecie i telefonie. Jeżeli korzystasz z pamięci podręcznej, wyczyść cache po zmianie kodu.
Gdzie wkleić kod?
-
Utwórz nowy fragment PHP
We wtyczce Code Snippets dodaj nowy fragment i nadaj mu nazwę „Nagłówek zmieniający kolor”.
-
Wklej cały kod
Nie dodawaj znacznika otwierającego PHP, jeśli Code Snippets nie wymaga jego wpisywania.
-
Wstaw shortcode
Umieść shortcode [sws_naglowek_scroll] w szablonie nagłówka albo w wybranym miejscu strony.
Podsumowanie
Nagłówek zmieniający kolor po przewinięciu pozwala połączyć efektowną, przezroczystą nawigację z czytelnym menu widocznym na dalszych częściach strony.
Kod umożliwia ustawienie osobnych kolorów, dwóch wersji logo, różnych wysokości przed i po przewinięciu, progu uruchomienia animacji, własnych linków oraz przycisku CTA.
Należy wykrywać pozycję przewinięcia za pomocą JavaScript i po przekroczeniu ustalonego progu dodać do nagłówka dodatkową klasę. CSS przypisany do tej klasy zmienia tło, kolor tekstu, wysokość i cień nagłówka.
Po dodaniu i aktywowaniu kodu należy umieścić shortcode [sws_naglowek_scroll] w szablonie nagłówka albo w wybranym miejscu strony.
W ustawieniu kolor_tla_start należy pozostawić wartość transparent. Nagłówek będzie wtedy nałożony na sekcję HERO.
Należy zmienić wartości kolor_tla_scroll oraz kolor_tekstu_scroll. Można na przykład ustawić białe tło #ffffff i ciemny tekst #111111.
Służy do tego ustawienie prog_przewiniecia. Wartość określa liczbę pikseli, po których nagłówek zmieni tło, wysokość i kolor tekstu.