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.
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 ).
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 | <!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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 | @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.
1 2 3 4 5 6 | .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.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | .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ą.
1 2 3 4 5 6 7 8 9 10 | .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:
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.
Tagi: css • fixed background • Masked Background • promowany
Krótko i na temat, ekstra!
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 :)
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 :)
dawno dawno nie budowałem to dla mnie inspiracja…. mighty webroad
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/
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.
>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).
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.
Prosto i szybko. Plus za brak JS ;)
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 ;)
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.
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.
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ę.
Z niecierpliwością zapoznam się z Twoimi projektami, które nie są dla Ciebie przygnębiające…
[…] 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 […]
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[… ]…