Nagłówek dopasowany do pełnego ekranu

Nagłówek dopasowany do pełnego ekranu

Jak przygotować nagłówek dopasowany do pełnego ekranu? Istnieje wiele rozwiązań dla tego zadania jak i wiele lepszych lub gorszych efektów końcowych. Każde z nich, które spełnia założenia autora, może okazać się wystarczające. Poniższy wpis przedstawia sposób na utworzenie kontenera <div>, o rozmiarach okna dowolnej przeglądarki w komputerze, tablecie czy też smartfonie. Umieszczając taki kontener jako pierwszy pod znacznikiem <body> uzyskuje się efekt pełnego okna zaraz po otworzeniu strony. Jako tło można wykorzystać obraz, wideo lub gif, a na pierwszym planie umieścić menu. Ważnym elementem tego rozwiązania jest to, że tło zostanie dopasowane do okna, ucinając jego skrajne części, a kontener <div> będzie przesuwał się w całości. Przykładem takiego rozwiązania jest strona PerfectSoft lub relaksowanie.pl.

Potrzebne elementy kodu

Całość składa się z niewielkich bloków kodu, które dla przejrzystości zostaną przedstawione w oddzielnych plikach. Jako pierwszy zaprezentowany zostanie kod html, który podpina pliki css i javascript, oraz w sekcji body przedstawia kontener nagłówka („large-header”) i kontener tekstu znajdującego się w dalszej części strony („outside_header”). Uruchomienie pliku „demo.js” musi znaleźć się za kontenerem „large-header”, ponieważ została tam zdefiniowana funkcja i jej wywołanie. Pozwala to na uruchomienie jej zaraz po utworzeniu kontenera, ale można to dowolnie zmienić, bez pogorszenia funkcjonalności kodu.

 

W pliku „Style.css”, najważniejsze jest, by umieścić zapis „margin: 0;” dla znacznika body. Pomijając ten wpis, nie będzie możliwe uzyskanie pełnego ekranu, ponieważ zostaną domyślnie dołączone marginesy. Wskazane jest także rozszerzenie tego zapisu o pozostałe znaczniki, które nie powinny mieć marginesów lub ramek. Przykładowy zapis pliku:

 

Plik „component.css” został przygotowany dla określenia kontenera nagłówka („large-header”).

 

Ostatnim plikiem jest „demo.js”. To w nim wywoływana jest funkcja regulująca wielkość kontenera nagłówka („large-header”).

Funkcja początkowo zapisuje w zmiennej wysokość okna, ponieważ szerokość dopasuje się dzięki wpisowi w css („width: 100%;”). W tym celu wykorzystane zostało pole „innerHeight”, które zawiera szerokość okna z pominięciem różnego rodzaju suwaków i innych opcji – samo wewnętrzne okno. W prezentowanym przypadku ma to kluczowe znaczenie, ponieważ pole „Height” – dające pełną szerokość okna, nie sprawdziłoby się na niektórych urządzeniach.
Następnie do zmiennej „largeHeader” przypisany zostaje kontener poprzez jego id i za pomocą właściwości przypisywana jest uzyskana wcześniej szerokość okna.

Loading Facebook Comments ...

Dodaj komentarz

Or