Animowany preloader z CSS3
[demo url=”http://edu3.home.pl/blog/pliki/css3_preloader/” files=”http://edu3.home.pl/blog/pliki/css3_preloader/css3_preloader.zip”] Już niedługo na eduweb.pl ukaże się kurs CSS3! Zaglądaj na bloga i naszego facebook’a! Zobacz także kurs Elastyczne Strony WWW, w…
[demo url=”http://edu3.home.pl/blog/pliki/css3_preloader/” files=”http://edu3.home.pl/blog/pliki/css3_preloader/css3_preloader.zip”]
CSS3. Gorący od wielu miesięcy temat, który każdego dnia zadziwia ogromem swoich możliwości, w dużej mierze ograniczonych wyłącznie wyobraźnią osób, z jego dobrodziejstw korzystających. W poradniku, który masz przed sobą skupimy się na jednej z ciekawszych stron CSS3, mianowicie na animacjach, jednak zanim stworzone elementy wprawimy w ruch, nadamy im przyjemny wygląd, nie używając ani jednego pliku a obrazkiem. Wszystko, co możesz zobaczyć w DEMO, stworzone zostało wyłącznie za pomocą HTML oraz CSS3.
Do dzieła!
Na początek oczywiście potrzebny nam będzie plik HTML, w którym umieszczona została struktura naszego preloadera. Nic nadzwyczajnego, sam zobacz:
Jak widzisz, całość naszego preloadera tworzy kontener w formie div
’a oraz 3 elementy span
wewnątrz. To one dostaną nowe życie dzięki CSS3. Style CSS dla naszego elementu .con
prezentują się następująco:
.con { font-size: 20px; /* 1em */ width: 10em; height: 1.2em; margin: 150px auto; position: relative; } .con:after { content: "Czekaj..."; display: block; position: absolute; top: 2.5em; left: 6em; font-family: Georgia, serif; font-size: 0.7em; text-shadow: -0.08em -0.08em 0 #000; color: #595959; }
Na początek ważna uwaga. Spójrz na zapis font-size: 20px;
. W tym momencie ustawiamy początkową wartość jednego em’a, czyli jednostki, którą będziemy się posługiwać od tej pory. Kiedy nasz projekt będzie już skończony, właśnie ten zapis pozwoli w elastyczny sposób zmieniać wielkość całego preloadera. Wystarczy, że zmienimy wartość na np. 30px
, a wszystko inne w proporcjonalny sposób dostosuje się do nowego rozmiaru.
Zgodnie z tą konwencją, nadajemy elementowi .con
szerokość 10em
, czyli w tym momencie równowartość 200px
, natomiast wysokość równa będzie 24px
(1.2em). Dodatkowo position: relative;
by element ten stał się kontekstem pozycjonującym dla elementów span
, które będziemy za moment pozycjonować absolutnie. Kolejno widzimy pseudoklasę :after
, dzięki której w sposób nieinwazyjny dodajemy tekst „Czekaj…” do naszego projektu. Pozycjonujemy go również absolutnie, tak aby znalazł się pod głównym kontenerem. I tutaj widzimy pierwsze użycie CSS3, mianowicie właściwość text-shadow
, która jako parametry przyjmuje kolejno: odsunięcie poziome, odsunięcie pionowe, promień rozmycia oraz kolor. Dzięki wartościom negatywnym tekst będzie sprawiał wrażenie „wciśniętego” w tło.
Czas teraz na ostylowanie elementów span
, które będą podstawą całej animacji. Na początek globalne style, dla wszystkich elementów span
:
.con span { display: inline-block; width: 0.85em; height: 0.85em; position: absolute; top: 3px; left: 0; box-shadow: inset 0 0.25em 0.1em rgba(255, 255, 255, 0.3), 0 0 0.5em rgba(234, 107, 121, 0.5); -webkit-transform: rotate(45deg); background: -webkit-linear-gradient(-45deg, #e71630 50%, #c91327 50%); }
Tutaj zapis display: inline-block
;, by pozwolić elementom na przyjmowanie szerokości i wysokości (można użyć również display: block;
) i jak już wcześniej wspomniałem pozycjonowanie absolutne wewnątrz kontenera .con
. Następnie widzimy kolejną właściwość CSS3 box-shadow
, dzięki któremu otrzymamy efekt cienia, zarówno zewnętrznego, jak i wewnętrznego. Wewnętrzny to ten zaczynający się od słowa inset
, po którym wpisujemy kolejno parametry, w ten sam sposób jak w opisanym wyżej text-shadow
. W parametrze koloru użyłem notacji rgba
(red, green, blue, alpha), która pozwala na użycie właściwości alpha, czyli przezroczystości. W tym przykładzie został użyty kolor biały, z przezroczystością na poziomie 0.3 (30%). Po przecinku dodana została kolejna linijka z deklaracją następnego cienia, tym razem zewnętrznego, w kolorze ciemnej czerwieni i pokryciem 50%. Przedostatnia linijka to kolejne czary z wykorzystaniem CSS3, a mianowicie transformacje. W podanych przykładzie, dzięki transformacji rotate
, obróciliśmy element o 45 stopni, z kwadratu tworząc romb (wizualnie oczywiście). W ostatniej linijce również nie zabrakło opisywanych dobrodziejstw. Tło zostało wypełnione gradientem, również przechylonym o 45 stopni, który w równym stopniu zapełnia odpowiednim kolorem 2 połowy elementu.
Jako, że wszystkie 3 elementy span
pozycjonowaliśmy absolutnie, są one w tym momencie jeden na drugim, a zatem faktycznie widzimy wyłącznie jeden z nich. Aby to naprawić odniesiemy się kolejno do drugiego oraz trzeciego elementu span
i ustawimy ich lewy margines kolejno na 1.2em
oraz 2.4em
, aby elementy wizualnie leżały tuż obok siebie:
.con span:nth-child(2) { margin-left: 1.2em; } .con span:nth-child(3) { margin-left: 2.4em; }
Tutaj kolejna właściwość CSS3, czyli selektor :nth-child
, który w nawiasie pozwala zdefiniować numer pożądanego elementu. I tak właśnie wybieramy kolejno drugi oraz trzeci span
.
Dość siedzenia! Czas na trochę ruchu.
Kiedy sprawy wyglądu elementów mamy już za sobą, pora tchnąć w nie trochę życia i pozwolić im wyjść ze sztywnych ram, które im nadaliśmy. Do tego celu wykorzystamy jedną z najmocniejszych stron nowego CSS, którą są animacje. Pierwszą animacją będzie ruch, a dokładnie animowanie lewego marginesu elementów span
do poziomu 9.2em
, czyli do miejsca, w którym kończy się nasz element .con
(aby dokładnie zobaczyć jego ramy, warto nadać mu właściwość background-color: gray;
). W tym celu stworzymy nową animację, którą nazwiemy „slide”, używając możliwości keyframes
:
@-webkit-keyframes slide { to { margin-left: 9.2em; } }
Zapis ten oznacza „stwórz animację o nazwie 'slide’, której celem będzie animacja lewego marginesu elementu do wartości 9.2em”. Tak stworzoną animację możemy teraz przypisać do wybranych elementów z szeregiem dodatkowych opcji. Przypisujemy ją więc do wszystkich elementów span:
.con span { -webkit-animation: slide 1s ease-in-out infinite alternate; }
Jako pierwszy parametr podajemy nazwę naszej animacji czyli „slide”, a następnie czas jej wykonania oraz rodzaj dynamiki (do wyboru: linear, ease, ease-in, ease-out, ease-in-out oraz cubic-bezier). Parametr infinity
odpowiedzialny jest za powtarzanie animacji w nieskończoność, natomiast alternate
za jej wykonywanie od końca. Oznacza to, że kiedy lewy margines elementu zostanie zanimowany do poziomu 9.2em
, to rozpocznie się animacja powrotu do wartości początkowej.
Wszystko działa jednak w tym momencie wszystkie elementy animują się w tym samym czasie, co nie jest efektem przez nas pożądanym, dlatego dla drugiego i trzeciego elementu span
nadamy inny czas wykonywania się animacji w ten sposób:
.con span:nth-child(2) { -webkit-animation: slide 1.5s ease-in-out infinite alternate } .con span:nth-child(3) { -webkit-animation: slide 2s ease-in-out infinite alternate; }
Teraz elementy będą się animować w różnym czasie, co da bardzo ciekawy i nieliniowy efekt. Przyszedł czas aby stworzyć kolejną animację, która zajmie się przezroczystością oraz rozmiarem elementów (nazwiemy ją fadeAndResize):
@-webkit-keyframes fadeAndResize { 50% { opacity: 0.5; width: 0.5em; height: 0.5em; } 100% { opacity: 1; } }
Tutaj zamiast notacji to
użyliśmy zapisu procentowego, dzięki któremu możemy określać stan elementu w poszczególnych fazach animacji. Możemy tam użyć wielu skoków, ale w tym przykładzie pozostaniemy na dwóch. W pierwszym zmieniamy wartość przezroczystości na 50% oraz rozmiary elementu, natomiast w drugim wracamy z wartością opacity
do 100% (tak naprawdę krok drugi nie był nam tutaj potrzebny, ale chciałem pokazać, że tworzenie wielu przejść jest możliwe). Teraz wystarczy dopisać wywołanie tej animacji do naszych elementów span
, również uwzględniając różny czas wykonania:
.con span { -webkit-animation: slide 1s ease-in-out infinite alternate, fadeAndResize 1.5s linear infinite; } .con span:nth-child(2) { -webkit-animation: slide 1.5s ease-in-out infinite alternate, fadeAndResize 3s linear infinite; } .con span:nth-child(3) { -webkit-animation: slide 2s ease-in-out infinite alternate, fadeAndResize 2s linear infinite; }
Tym razem przejście liniowe (linear) i również zapętlenie w nieskończoność. Zapis alternate
nie jest tutaj potrzebny. Gotowe!
Podsumowanie
Jak widzisz, w kilku krokach byliśmy w stanie stworzyć ciekawie wyglądający efekt preloadera, wykorzystując jedynie potencjał HTML5 i CSS3. Trzeba się oczywiście liczyć z faktem, że pokazany tu przykład nie zadziała w starszych przeglądarkach, czyli głównie w Internet Explorerze, jednak nie powinno to być dla nas hamulcem przed przyswajaniem i wdrażaniem nowinek technologicznych, które są do dyspozycji już jakiś czas. Jak już wspomniałem na początku, jedyne co trzeba mieć na uwadze, to dopisanie wszystkich prefiksów specyficznych dla danej przeglądarki (-moz-, -o-, itd). Warto również wiedzieć, że funkcja keyframes
pozwala na użycie wielu właściwości CSS, a zatem element możemy bez problemu obracać w koło z pomocą transform: rotate()
, czy choćby zmieniać jego położenie na ekranie. Oczywiście opisane tu techniki to tylko wierzchołek góry lodowej, która czeka by ją zdobyć, dlatego niech to będzie dla Ciebie motywacja do eksperymentów i nauki!