Przejdźmy do rzeczy. Na pewno odwiedzacie strony internetowe w stylu modern - chociażby po to, aby poszukać inspiracji do szablonów minimalistycznych. Mnie na takich stronach bardzo spodobał się jeden efekt, jednak za nic nie mogłam wymyślić, jak go zrobiono. Chodziło o to, że po wejściu na stronę główną mieliśmy duży, ładny, nieruchomy obrazek, który po scroolowaniu chował się pod zwykle jednolitym tłem. Myślę sobie - ok, nieruchome tło i zwykła ramka, nic nadzwyczajnego. Ale co mamy dalej? Tło się kończy i mamy kolejny obrazek, również nieruchomy, wynurzający się spod tego jednolitego tła. Kolejne tło? Czyżby istniał jakiś kod, który zmienia obrazek tła po zjechaniu do danego momentu? Wystarczyło pomniejszyć stronę, aby zauważyć, że te obrazki są od siebie niezależne i możemy oglądać je wszystkie jednocześnie przy odpowiednio dużym pomniejszeniu.
Długo zastanawiałam się nad tym, jak zostało to zrobione i odpowiedź okazała się banalna. Dla zilustrowania tego efektu, przykład macie poniżej:
Jakaś treść w ramce. Nic ważnego, nie przejmujcie się tym :)
Fajnie to wygląda, prawda?
Okazuje się, że sprawa jest bardzo prosta. Należy przygotować 3 ramki (może to być nagłówek, tło pod posty i stopka - cokolwiek chcecie). Dla lepszego efektu niech każda z nich ma szerokość strony i niech odległość między nimi wynosi 0px. Górnej i dolnej ramce oddzielnie definiujemy tło w CSS'ie, a powinno wyglądać to następująco:
Tak, to "fixed" odpowiada za to, że tło jest nieruchome. Cała filozofia. I możemy ich robić sobie nieskończenie wiele..ramka1 {
background-image: url(adres-obrazka);
background-attachment: fixed;
}
Nie czujecie się usatysfakcjonowani, prawda? W takim razie na koniec mam dla Was coś dużo ciekawszego, co również znajduje zastosowanie w takich nowoczesnych szablonach.
Są to bardzo fajne jednostki, których możecie używać w CSS'ie. 100vh to jedna wysokość ekranu, a 100vw to jedna szerokość ekranu.100vh = 100 view hight
1000vw = 100 view width
Działajcie!
A następny poradnik będzie o tym, jak poznać wszystkie selektory. Nie, nie będzie to spis wszystkich selektorów, ale sztuczka, która bardzo Wam się przyda i pozwoli Wam ich nie pamiętać :)
Do następnego posta, mam nadzieję, że coś z tego wam się przyda.
Dzięki za poradę, bardzo pomogłaś.
OdpowiedzUsuńA mam pytanie: wiesz, może jak zrobić stały pasek ze stronami u góry bloga, ale tak żeby ukazywał się dopiero od jakiegoś konkretnego miejsca?
Właściwie to na pewno związane jest z JavaScript, a ja JavaScript nie ogarniam jeszcze za dobrze :) Ale jak będę wiedziała to na pewno zrobię poradnik :)
UsuńWystarczy w google wpisać sticky menu i od razu znajdzie odpowiedź... Jak już robić nieruchome tło to jeszcze jakiś fajny prallax by się przydał
UsuńJa przy tym menu od razu pomyślałam o tobie, na pewno byś umiał coś takiego zrobić :) To ja sobie poczytam w necie :)
UsuńO i masz... znalazłam tego bloga już jakiś czas temu, kiedy jeszcze był w remoncie (swoją drogą, zmiana wysokości fotki w nagłówku bardzo na plus, od razu to lepiej wygląda), zaglądałam co jakiś czas, czekając na jakąś nowość i... jak zaglądać przestałam, to trzy posty mnie ominęły. No ale coś mnie dzisiaj tknęło i jestem ;)
OdpowiedzUsuńEfekt z zakotwiczonym tłem też jakiś czas temu bardzo przypadł mi do gustu, świetnie to wygląda szczególnie przy wszelkiego rodzaju onepager'ach i stylizowanych na nie stronach głównych. W dodatku takie to proste, więc... tylko brać i korzystać!
Viewport units to z kolei zbawienie, bez którego nie wyobrażam sobie już tworzenia templatek. Chociaż vh bywa zdradliwe, szczególnie przy stronach responsywnych - kiedy ekran jest odwrócony pionowo, strona potrafi wyglądać naprawdę komicznie, jeśli tych wartości nie skorygujemy.