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


25 lipca 2014 / Michał Kortas


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 ).

Kod CSS

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

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

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.

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

Kluczowym elementem jest linia #6:

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:


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

  1. Dariusz Mydlarz pisze:

    Krótko i na temat, ekstra!

  2. Piotr Nalepa pisze:

    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 :)

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

      • Tomasz Piątek pisze:

        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 :)

  3. Marcin Bagiński pisze:

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

  4. Comandeer pisze:

    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…

    • 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/

      • Comandeer pisze:

        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.

      • 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.

      • Comandeer pisze:

        >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).

  5. Michał Smoliński pisze:

    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.

  6. Mr.Mr pisze:

    Prosto i szybko. Plus za brak JS ;)

  7. Comandeer pisze:

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

  8. Robert pisze:

    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.

    • Mr.Mr pisze:

      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.

  9. qwertuMMM pisze:

    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ę.

  10. […] jQuery CSS3 image hover effects for you. All these hover effects work wonder for the web design. Nakładające się na siebie tła przy przewijaniu strony w CSS3 | WEBroad.pl. Od jakiegoś czasu zauważyłem (pewnie nie tylko ja) rosnący trend na budowanie witryn […]

  11. Title

    [… ]very handful of internet websites that eventually turn out to be thorough under, through each of our viewpoint are without doubt very well worthy of checking out out[… ]…

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany.