HTML5 & CSS3Webdesign & UX

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

CSS3 LogoOd 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>

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;}

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;
}

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");
}

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;
}

Kluczowym elementem jest linia #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:cssfixed backgroundMasked Backgroundpromowany

komentarzy 19

  • Awatar
    Dariusz Mydlarz

    25 lipca 2014 12:22

    Krótko i na temat, ekstra!

    Odpowiedz
  • Awatar
    Piotr Nalepa

    25 lipca 2014 12:43

    Dobry tekst. Dobrze wyjaśnione. Użyłbym skróconej wersji zapisu dla background, ale jest ok :)
    PS. Wyczuwam inspirację jednym z moich wpisów na blogu :)

    Odpowiedz
    • Awatar
      Michał Kortas

      25 lipca 2014 12:50

      Dzięki. Tak, zaciekawił mnie parallax jakiś czas temu, ale postanowiłem przygotować coś bez JSa :)

      Odpowiedz
      • Awatar
        Tomasz Piątek

        25 lipca 2014 13:06

        to taki pseudo paralax ;> fajnie wygląda gdy tło jest stałe a na są nałożone np. krople z wodą, czy coś innego i przewija się to wolniej niż cała strona :)

        Odpowiedz
  • Awatar
    Marcin Bagiński

    25 lipca 2014 13:10

    dawno dawno nie budowałem to dla mnie inspiracja…. mighty webroad

    Odpowiedz
  • Awatar
    Comandeer

    25 lipca 2014 14:48

    A ja tak okołotematowo: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

    Co do samego efektu – wygląda to nieźle. Nigdy mi dotąd nie przyszło do głowy, żeby wykorzystać do tego background-attachment.

    Bardzo fajnie by było, gdyby przeglądarki wreszcie obsługiwały składnię attr(data-back, url) – wtedy zamiast tworzyć style dla każdego tła osobno, można by zrobić uniwersalne…

    Odpowiedz
    • Awatar
      Michał Załęcki

      26 lipca 2014 11:56

      Chciałbyś dodawać do np. „data-back” url elementu do ustawienia go jako tło? To tylko dublowanie już istniejącego rozwiązania. Zamiast data-back=”bg1.jpg” użyć style=”background-image: url(‚bg1.jpg’)”. Klasa .bg jest wtedy wcale niepotrzebna.
      Demo: http://demo.michal.zalecki.pl/maskedbg2/

      Odpowiedz
      • Awatar
        Comandeer

        26 lipca 2014 12:09

        Jest pewna różnica pomiędzy deklaratywnym określeniem co ma być prezentowane a narzuceniem konkretnej implementacji tej prezentacji.

        Poza tym Twój kod nie będzie działał z aplikacjami, które tworzę, bo jest niezgodny z zasadami CSP – style inline i inline’owy JS są z automatu wycinane. Dla aplikacji HSTS CSP jest wymogiem, więc użycie klasy + [data-back] jest o wiele sensowniejsze niźli style inline.

        Odpowiedz
      • Awatar
        Michał Załęcki

        26 lipca 2014 12:15

        Rozmawiamy o tym konkretnym przykładzie, a nie aplikacjach dotkniętych różnymi ograniczeniami. W taki sposób można się w nieskończoność przerzucać, że „moja aplikacja musi działać na IE8, więc cover odpada, a filtrów też nie mogę, bo nasz świetny preprocesor go nie ogarnia, a raw odpada bo za siedmioma górami i lasami jest gdzieś w naszej dokumentacji, że tak jest źle” etc.

        Odpowiedz
      • Awatar
        Comandeer

        26 lipca 2014 13:48

        >Rozmawiamy o tym konkretnym przykładzie
        Zawsze myślałem, że egzemplifikacja służy rozpoczęciu dyskusji o ogólnych mechanizmach w nim użytych. Jeśli zawęzimy dyskusję do samego przykładu to można powiedzieć jedynie „Wow” :|

        Nie mówię o jakichś hipotetycznych ograniczeniach, ale moich własnych doświadczeniach przy projektowaniu takich a nie innych aplikacji. A HSTS będzie coraz szerzej stosowany w związku z przechodzeniem na SPDY/HTTP 2.0. Polecam spojrzeć na kod takiego FB, Twittera czy choćby porneLa – nagłówek Strict-Transport-Security jest dołączony, by zawsze wymuszać optymalne połączenie przez szybki serwer SPDY. To nawet nie jest kwestia „ograniczenia” a właśnie poprawnego użycia feature z fallbackiem dla starszych browserów.

        >Poza tym istnieje zawsze ‚unsafe-inline’ przy CSP, więc „Twój kod nie będzie działał” jest dużym skrótem myślowym, gdyż jest to kwestia konfiguracji.
        No to nie rozumiem po co ktoś w takim wypadku używa CSP, który służy do ograniczenia ataków XSS a my zostawiamy najlepszą furtkę dla XSS. Ba, jest to nawet napisane w samej specce: http://www.w3.org/TR/CSP11/#sec-directives
        To tak jakby mieć alarm w domu, ale zostawić drzwi do domu otwarte… Niby działa, ale jednak coś jest nie tego.

        Tobie Twój sposób działa, a mnie nie, bo mam inne wymagania, które opisałem w poście (wyraźnie napisałem, że chodzi mi o aplikacje, które tworzę, więc nie rozumiem skąd atak…). Wolisz swój sposób, to proszę bardzo – używaj go.

        Wracając jeszcze do części o deklaratywnym określeniu vs konkretnej implementacji. Wsadzenie CSS-a bezpośrednio do HTML uniemożliwia szybką zmianę sposobu animacji/nadawania tego tła. W chwili, gdy mamy to jako atrybut, przepisanie tego np na animację w canvas jest kwestią dołożenia odpowiedniego skryptu, bez nawet ruszania HTML. Przy wielu aplikacjach takie działanie jest bardzo pożądane (ba, jest to idea stojąca za całym konceptem WebComponents).

        Odpowiedz
  • Awatar
    Michał Smoliński

    25 lipca 2014 22:08

    Spodziewałem się czarowania JSem, a tu taka niespodzianka. Bardzo pożyteczny artykuł. Inspirujący do dalszego kombinowania z jakże popularnym ostatnio tematem stron typu „neverending story”. Ostatnio trafiłem na „JQuery Scrollorama”, przykład z tego artykułu idealny dla sprawdzenia przy okazji możliwości tego pluginu.

    Odpowiedz
  • Awatar
    Mr.Mr

    26 lipca 2014 12:33

    Prosto i szybko. Plus za brak JS ;)

    Odpowiedz
  • Awatar
    Comandeer

    11 sierpnia 2014 16:59

    Właśnie się napatoczyłem na artykuł o prawdziwym (zwolniony scroll, perspektywa i te sprawy) parallaxie w CSS – http://blog.keithclark.co.uk/pure-css-parallax-websites/
    Co prawda nie jest tak prosty, jak technika przedstawiona tutaj, ale razem stworzyłyby świetne rozwiązanie w duchu PE ;)

    Odpowiedz
  • Awatar
    Robert

    14 sierpnia 2014 18:22

    Witajcie. Jestem zielony i dopiero zaczynam przygodę z językiem HTML i CSS i mam do Was pytanie dlaczego mój tekst pomimo, że skopiowałem kod ze strony nie jest wyśrodkowany? W separatorze jest wszystko ok, ale text-align w content-cie już nie przynosi żadnych rezultatów i tekst wychodzi poza ekran.
    Pozdrawiam.

    Odpowiedz
    • Awatar
      Mr.Mr

      14 sierpnia 2014 19:06

      Na forum zapraszamy (niestety tymczasowo niedostępne 0_0 – będziemy naprawiać). Jak już będzie można pisać to podaj w pytaniu od razu kod, strony. Może ktoś pomoże.

      Odpowiedz
  • Awatar
    qwertuMMM

    17 września 2014 02:15

    Osobiście nie przepadam za tym efektem. Mówiąc delikatnie, ta forma prezentacji treści jest męcząca i irytująca. A obecnie mamy czasy, że jak na coś jest jakiś trend to nagle taką samą koncepcją jesteśmy atakowani na znacznej części projektów.
    Jeszcze parę lat temu faktycznie projekty cechowała jakaś indywidualność, a obecnie mamy do czynienia ze stronami na jedno kopyto.
    Przeglądam dość często galerie topowych stron i szczerze mówiąc niewiele z tych projektów mnie zauroczyło.
    Obecnie wiele osób wykorzystuje frameworki pokroju Foundation czy Bootstrap, klepiąc te projekty jak maszyna oparte na jednym schemacie.

    Strasznie to przygnębiające, bo strony internetowe przestają się sensownie wyróżniać. Można użyć frameworków ale niech kwestia grafiki będzie jednak trochę bardziej oryginalna niż można zaobserwować obecnie.

    A sądząc po komentarzach, znowu będzie wysyp projektów opartych na tym efekcie.
    Strasznie ciężko znaleźć jakieś fajne projekty stron nie będące powielaniem trendów., które straszliwie spłaszczają tą dziedzinę.

    Odpowiedz
    • Awatar
      Travsko

      20 grudnia 2014 08:06

      Z niecierpliwością zapoznam się z Twoimi projektami, które nie są dla Ciebie przygnębiające…

      Odpowiedz

Zostaw odpowiedź