Masked Background

Od jakiegoś czasu zauważyłem (pewnie nie tylko ja) rosnący trend na budowanie witryn internetowych w stylu „one page”. Jest to ciekawe rozwiązanie kiedy chcemy zaprezentować klientom nasz produkt czy też zaprojektować swoje portfolio. Widziałem już kilka szablonów, które przy przewijaniu ich scrollem przedstawiają bardzo ładny efekt nakładania się na siebie teł poszczególnych sekcji witryny, przy czym każde z nich pozostaje nieruchomo w miejscu.

Nie wiem czy domyślacie się o czym mowa, dlatego już teraz przedstawię wam demo dla tego tutorialu.

Zobacz przykład on-line

Struktura HTML

Zacznijmy od przygotowania prostej strony HTML, która zawierać w sobie będzie cztery oddzielne sekcje ( .content ) informacyjne, oddzielone od siebie blokiem separatora ( .separator ).

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="css.css" rel="stylesheet">
</head>

<body>
<header>
	<img src="https://webroad.pl/wp-content/uploads/2014/07/webroad-horizontal.png" alt="Logo">
</header>
	<div class="content bg1">
		<h2>Cześć, witamy na WEBroad!</h2>
		<p>Jest to blog dla webmasterów, poszukujących wiedzy <br>na temat projektowania stron internetowych.</p>
	</div>  

	<section class="separator">
		<h3>kontakt@webroad.pl</h3>
	</section>

	<div class="content bg2">
		<h2>Szukasz pracy lub pracownika?</h2>
		<p>Mamy dla Ciebie specjalną tablicę z ogłoszeniami o pracę.</p>
	</div>

	<section class="separator">
		<h3>kontakt@webroad.pl</h3>
	</section>

	<div class="content bg3">
		<h2>Nie znalazłeś odpowiedzi?</h2>
		<p>Zapytaj o rozwiązanie na naszym forum.</p>
	</div>

	<section class="separator">
		<h3>kontakt@webroad.pl</h3>
	</section>

	<div class="content bg4">
		<h2>Chcesz się z nami skontaktować?</h2>
		<p>Zrób to za pomocą odpowiedniego formularza.</p>
	</div>
</body>
</html>

<!doctype html>

<html>

<head>

</head>

<body>

</header>

<h2>Cześć, witamy na WEBroad!</h2>

<p>Jest to blog dla webmasterów, poszukujących wiedzy <br>na temat projektowania stron internetowych.</p>

</div>

<h3>kontakt@webroad.pl</h3>

</section>

<h2>Szukasz pracy lub pracownika?</h2>

<p>Mamy dla Ciebie specjalną tablicę z ogłoszeniami o pracę.</p>

</div>

<h3>kontakt@webroad.pl</h3>

</section>

<h2>Nie znalazłeś odpowiedzi?</h2>

<p>Zapytaj o rozwiązanie na naszym forum.</p>

</div>

<h3>kontakt@webroad.pl</h3>

</section>

<h2>Chcesz się z nami skontaktować?</h2>

<p>Zrób to za pomocą odpowiedniego formularza.</p>

</div>

</body>

</html>

Kod CSS

Dobrze, a więc na początek do naszego arkusza stylów dopiszmy następujący, startowy kod.

@import url(https://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext);
* {
  box-sizing: border-box;
}
html {
  font-size: 1em;
  font-family: 'Oswald';
  background-color: #fff;
  color: #d9d9d9;
  
}
body {
  margin: 0;
}
h2 {margin: 0; font-size: 3em;}
header {text-align: center; height: auto; padding: 20px 0 20px;}
header img {max-width: 400px;}

@import url(http://fonts.googleapis.com/css?family=Oswald:400,700&subset=latin,latin-ext);

* {

box-sizing: border-box;

}

html {

font-size: 1em;

font-family: 'Oswald';

background-color: #fff;

color: #d9d9d9;

}

body {

margin: 0;

}

h2 {margin: 0; font-size: 3em;}

header {text-align: center; height: auto; padding: 20px 0 20px;}

header img {max-width: 400px;}

Separator pomiędzy sekcjami powinien (przynajmniej trochę) odróżniać się od reszty.

.separator {
  font-size: 1.6em;
  padding: 2.6em 0;
  text-align: center;
  background: #333;
}

.separator {

font-size: 1.6em;

padding: 2.6em 0;

text-align: center;

background: #333;

}

Dla każdej sekcji musimy przypisać osobne tło. Przyjęliśmy, że będą to cztery bloki, tak więc dyle deklaracji musimy zamieścić w arkuszu. Tło musi być wystarczająco duże, aby zakryć cały kontener. Oczywiście zostanie ono dopasowane automatycznie dzięki późniejszej właściwości CSS ( background-size ), ale tak czy inaczej rozmiar obrazka musi być dość duży, aby nie stracił on na jakości.

.bg1 {
  background-color: #fff;
  background-image: url("bg1.jpg");
}
.bg2 {
  background-color: #fff;
  background-image: url("bg2.jpg");
}
.bg3 {
  background-color: #fff;
  background-image: url("bg3.jpg");
}
.bg4 {
  background-color: #fff;
  background-image: url("bg4.jpg");
}

.bg1 {

background-color: #fff;

}

.bg2 {

background-color: #fff;

}

.bg3 {

background-color: #fff;

}

.bg4 {

background-color: #fff;

}

Na koniec część najważniejsza. Style dla sekcji z treścią.

.content {
  color: #fff;
  min-height: 650px;
  text-align: center;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  text-shadow: 0 0 20px #000;
  font-size: 1.8em;
}

.content {

color: #fff;

min-height: 650px;

text-align: center;

background-size: cover;

background-attachment: fixed;

background-repeat: no-repeat;

text-shadow: 0 0 20px #000;

font-size: 1.8em;

}

Kluczowym elementem jest linia #6:

  background-attachment: fixed;

6	background-attachment: fixed;

Właściwość ta kotwiczy tło danego elementu w miejscu podczas przewijania ekranu.

Podsumowanie

W taki oto prosty sposób, korzystając jedynie z zalet CSSa stworzyliśmy ciekawy efekt. Powyższy tutorial jest tylko prostym przykładem. Zdaję sobie jednak sprawę, że za jego pomocą można przygotować jeszcze lepsze efekty wizualne naszej witryny.

Zobacz przykład on-line

Tagi: css • fixed background • Masked Background • promowany

Nakładające się na siebie tła przy przewijaniu strony w CSS3

Struktura HTML

Kod CSS

Podsumowanie

Partner technologiczny

Najnowsze komentarze

Robert

początkujący

Tom

awprojekt

Temat