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”]

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!