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.

<!DOCTYPE html>
<html lang="pl">

<head>
	<link rel="stylesheet" type="text/css" href="css/component.css" />
	<link rel="stylesheet" type="text/css" href="Style.css" media="screen" />      
</head>

<body>

	<div id="large-header" class="large-header">
		<!--  Zawartość dopasowanego nagłówka -->  
	</div>
	<script src="js/demo.js"></script>


	<div id="outside_header">

		<br><br>
		"PerfectSoft"
		<br><br>
		Idealne rozwiązania dla firm
		<br><br>

	</div>

</body>
</html>

 

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:

body, div, h1, h2, h3, h4, h5, h6, p, ul, ol, li, dl, dt, dd, img, form, fieldset, blockquote {
	margin: 0; padding: 0; border: 0;
}

 

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

/* Header */
.large-header {
	position: relative;
	width: 100%;
	overflow: hidden; /*Ukrywa zawartość kontenera jeśli jest ona większa niż okno przeglądarki*/
	background-size: cover;	background-position: center center; /*Wyświetla tło bez powtórzeń i dobiera jego centralną część*/
	z-index: 1;/*index pozwoli zarządzać widocznością elementów w kontenerze*/
}

.large-header {
background-image: url('../img/XYZ.jpg');
}

 

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

(function() {
    var width, height, largeHeader, target;

//Konieczne jest wywołanie funkcji
    assignHeader();

//Definicja funkcji
    function assignHeader() {
        height = window.innerHeight;

        largeHeader = document.getElementById('large-header');
        largeHeader.style.height = height+'px';
    }
})();

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