Animacja ikon, obrazków na przykładzie dłoni

Dziś postaram się pokazać jak w prosty sposób uzyskać efekt animowanej ikony (małego obrazka) na stronie internetowej.

Na początek warto zapoznać się ze stroną: http://fontawesome.io/
To właśnie z niej pobierzemy wszystkie potrzebne nam grafiki a właściwie symbole ponieważ wszystkie elementy tej biblioteki są tak naprawdę interpretacją różnych znaków (fontów lub SVG). Jakie to ma zalety? Ikonki te zachowują się jak tekst są więc łatwo skalowalne i obsługiwane przez te same wartości.

Znaki z tej bazy można dowolnie umieszczać na stronach internetowych również do celi komercyjnych. W celu skorzystania z biblioteki możemy zaimplementować ją w naszej witrynie poprzez dodanie:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css">

Jak pobrać ikonę

W naszym przypadku planowana animacja ikon polegać będzie na ruchu dłoni. Dlatego następnym krokiem jest odnalezienie odpowiednich znaków.

W celu poprania odpowiedniego znaku należy w niego kliknąć. Zostaniemy wtedy przeniesieni na stronę opisującą konkretny znak.

Teraz spoglądamy na pasek poniżej obrazka znajduje się na nim kod ikony, gotowa ikonka (zaznaczona na czarno) i numer znaku. To właśnie on nas najbardziej interesuje. Możecie go też sprawdzić np. w Chrome badając ikonkę. Interesujący nas fragment kodu znajduje się w pseudo klasie :before

Jak widać kod ikonki to f256:

content: "\f256";

W tym momencie „mamy już 1 dłoń” do animacji potrzeba nam jest jednak ich więcej. Analogicznie pobieramy kody dla pozostałych.

Teraz ustalimy wielkość animowanego elementu – nie ma sensu by była jakaś mała więc nadam jej rozmiar 48px. Załatwi to poniższy kod

#div1 {
font-size:48px;
}

Najważniejszą częścią tego kodu będzie skrypt w JavaScript, w którym nie tylko podstawimy wybraną przez nas ikonkę ale również sprawimy by wraz z innymi dała efekt wrażenia ruchu.

<script>
 function hand() {
   var a;
   a = document.getElementById("div1");
   a.innerHTML = "&#xf25a;";
   setTimeout(function () {
   a.innerHTML = "&#xf256;";
 }, 500);
 setTimeout(function () {
   a.innerHTML = "&#xf259;";
 }, 1000);
 setTimeout(function () {
   a.innerHTML = "&#xf256;";
 }, 1500);
}
hand();
setInterval(hand, 2000);
</script>

Jak widzicie na potrzeby kodu zmienił się trochę wygląd kodu ikonki:

f256  na &#xf256 (dodano przedrostek  &#x)

W ten sam sposób można uzyskać np. ładującą się baterię, obracające się koło symbolizujące ładowanie strony i wiele innych.

Działające demo znajdziecie tutaj.

Więcej ciekawych animacji znajdziecie:

http://www.w3schools.com/howto/howto_js_animate_icons.asp