Horizontal parallax. Jak go wykonać w czystym CSS?
Potrzebujesz lekkiego i intrygującego efektu w swoim projekcie? Zaimplementuj horizontal parallax przy użyciu samego CSSa. A może jeszcze nie wiesz czym on jest? Dzisiaj dowiesz się wszystkiego.
Czego dowiesz się w dzisiejszym wpisie?
Po raz kolejny poruszę temat parallaksy czyli efektu optycznego powstałego na wskutek przesunięcia poszczególnych elementów z różną prędkością na przykładzie prostej aplikacji internetowej.
Opiszę jak otrzymać taki efekt przy użyciu czystego CSS bez ingerencji w skrypty JS. Do tego wprowadzę kolejną wariację w postaci horizontal scrolla czyli przesunięcia strony internetowej w bok na skutek przewijania przeglądarki w dół.
Na końcu pokażę rzeczywistą implementację tego efektu na przykładzie mojego projektu 🙂
Dlaczego ten wpis powstał?
Jakiś czas temu nazwijmy to zafascynowałem się paralaksą i napisałem o tym oddzielny wpis. Stworzyłem przy tym projekt który nazwałem Man.
Pomijając fakt, że wspomniana strona miała kilka niedociągnięć w postaci np. nienajlepszej synchronizacji grafik czy braku wersji mobilnej, to byłem z niej zadowolony 🙂 Postanowiłem zostawić ją jaka jest bez większych poprawek bo po co odgrzewać starego kotleta?
Prawdziwym problemem była wydajność. Próbowałem optymalizować algorytmy i coś się udało poprawić ale generalnie wszystko pracowało w JSie na metodzie onscroll. Dużo grafik i eventów na onscrollu… To się nie mogło za dobrze skończyć….Oglądałem inne strony z paralaksą i myślałem jakim cudem niektóre strony działają tak płynnie?
Na pomoc przyszły mi Dev Toolsy od Mozzilli. Chrome zaczął mnie męczyć i przerzuciłem się na Firefoxa przy developerce 🙂 I tak całkiem przypadkiem znalazłem odpowiedź na nurtujące mnie pytanie…
Parallax w czystym CSS
Teraz objaśnię jak go wykonać. Tradycyjnie na przykładzie kolorowych kółek. Poniżej przykład na CodePenie:
See the Pen MVJMQp by Bart (@bedekodzic) on CodePen.
Jak widać powyżej po scrollowaniu elementy pięknie przesuwają się z rożną szybkością 🙂 O to chodziło!
HTML
Markup wygląda tak:
<body>
<h1>Użyj scrolla</h1>
<div class="circles">
<div class="circle circle-1"></div>
<div class="circle circle-2" ></div>
<div class="circle circle-3" ></div>
</div>
</body>
Jeden główny kontener circles i trzy podrzędne elementy circle.
CSS
A więc na początek należy sobie zdefiniować obszar roboczy czyli kontener circles gdzie będzie działa się cała magia.
Dla zasady pozbędę się marginu na body aby nie psuć efektu:
body {
margin: 0;
}
Kontener główny
Teraz kontener główny circles.
.circles {
perspective: 10px;
height: 100vh;
overflow-y: auto;
}
Ważnym jest aby zajmował on dokładnie taką wysokość w przeglądarce jaką potrzebujemy. Jeśli ma to być cała ustawiamy na 100vh. Bardzo polubiłem te jednostki 🙂 Paralaks będzie się dział wewnątrz tego kontenera.
Magia dzieje się na wskutek perspektywy perspective. Modyfikujemy ją wedle uznania i ustawiamy overflow-y:auto; żeby można było swobodnie przesuwać scrollem wewnątrz kontenera.
Elementy paralaksy
Teraz zdefiniujmy elementy które mają się poruszać z różną prędkością czyli circle.
.circle {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: 30vh 10vh 100vh;
}
Ustawiamy wszystkie elementy na absolucie i zerujemy ich położenie. Teraz ważne jest danie tym elementom przestrzeni po której będą mogły się poruszać. Można to zrobić np. marginem. Bez tego obiekty będą stały jak słupy… Wielkości z zależności od potrzeb.
Kolejnym krokiem jest zdefiniowanie zachowania każdego elementu z osobna.
.circle-2 {
background-color: green;
transform: translateZ(-10px) scale(2);
left: 30%;
}
Każdy z nich jest na absolucie więc dowolnie możemy modyfikować położenie. Teraz ważną właściwością jest transform: translateZ bo za jej pomocą ustawiamy szybkość poruszania się danego obiektu. Jest to nasza perspektywa czyli odsunięcie wgłąb po osi Z 🙂
Podczas kodzenia zauważysz, że każdy element się zmniejsza na wskutek odsunięcia. Jeśli efekt jest niepożądany można to zniwelować za pomocą scale. Aby wyliczyć potrzebny współczynnik należy użyć poniższej proporcji:
1 + (translateZ * -1) / perspective
To w zasadzie tyle. Nasza paralaksa jest gotowa. Bez nawet jednej linijki JSa 🙂
Co dalej?
Ten sposób daje możliwość dowolnej implementacji tego efektu. Wystarczy pobawić się jeszcze z właściwościami z-index czy bardziej skomplikowanymi kontenerami zawierającymi więcej podrzędnych elementów. Ogranicza nas tylko wyobraźnia 🙂
A co ja mam jeszcze do dodania? Tak już całkiem od siebie?
Tech Stack – czyli pogoń po biurze…
Od jakiegoś czasu pracuje nad nową stroną portfolio. Po co? Bo mam niewykorzystaną wizję którą bardzo chce zrealizować. Stare było ok ale mam nadzieję, że nowe będzie dużo lepsze. Kiedy wreszcie wszystko dopracuje oczywiście 🙂
Sekcja Tech Stack
Wielu Devów w swoim portfolio opisuje jakie znają technologie. Choć czasem zdarza się wyjątek to zazwyczaj jest to robione w bardzo podobny sposób tzn. ikonki jakoś tam poukładane, czasem komentarz i nie daj Boże procent znajomości 🙂 Proste w przekazie ale szablonowe…
Jako, że technologie się ciągle zmieniają to rozszerzanie warsztatu wymaga wielu godzin nauki online i… pytaniu współpracowników o dany problem. Tak zwana konsultacja. Często więc trzeba podejść do innego biurka jeśli jest taka możliwość. Tak też wygląda sekcja Tech Stack w moim nowym portfolio 🙂
Założenie jest takie, że mój internetowy avatar będzie poruszał się po biurze na wskutek skrolowania w dół. Ruch będzie odbywał się w prawo lub lewo w zależności od kierunku scrolla. W między czasie avatar będzie zbierał ikonki z technologiami. Coś w stylu gierki tylko używamy scrolla a nie strzałek. Oczywiście w sporym uproszczeniu 🙂
Narazie jeszcze bez avatara ale biuro zbudowane przy pomocy horizontal scrolla i paralaksy jest już gotowe. Gdzie ta paralaksa? Jak się przyjrzycie kolejnym warstwom z biurkami możecie zauważyć, że poruszają się z różną prędkością. Koniec pisania. Czas na przykład:
http://portfolio.bedekodzic.pl/
Samego avatara co biega jeszcze nie ma bo nie jestem zadowolony z algorytmu 🙁
Wyzwania
Powyższa strona jest połączeniem grafiki wektorowej, horizontal scrolla (metoda 4) i paralaksy opisanej w tym wpisie. Przetestowałem to też na moim androidzie i działa to jak należy. Na urządzeniach mobilnych przesuwa się tylko ruchem w bok a nie dół. Jest OK.
Za wyzwanie uważam napisanie algorytmu który definiował by ruch avatara przy skrolowaniu. Napisałem już coś co działa używając metody onscroll w JavaScripcie. Efekt jest osiągnięty jednak czy można zrobić to jakoś inaczej? Żeby nie obciążało to tak bardzo przeglądarki? Nie wiem czy wystarczająco jasno opisałem co chciałbym osiągnąć ale jeśli tak to czy ktoś ma jakiś pomysł jak to zrobić?
Podsumowanie
Paralaksa jest znanym efektem który może ubogacić projekt internetowy. Teraz już wiesz jak wykonać go bardzo prostym i wydajnym sposobem. Niech ta wiedza pomoże Ci przy tworzeniu czegoś nowego i niesamowitego 🙂
Piszę dla was tego bloga bo lubię aplikacje internetowe. Mogę je projektować, kodować a potem o nich pisać czując dreszczyk ekscytacji za każdym razem gdy trafię na coś nowego. Bo uczymy się całe życie. Prawda?
Cześć jestem Bartek.
Na tym blogu wprowadzę Cię w tajniki Front-Endu i programowania webowego.