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

zdjęcia, photos, images

Kategoria wpisu Frontend, JavaScript, jQuery, Kurs CSS, Kursy Tagi: , , , on przez .



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). 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 skożytanie biblioteki możemy zaimplementować ją w naszej witrynie poprzez dodanie:

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.

ikona dłoni

pasek z kodem

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

widok w inspektorze

Jak widać kod ikonki to 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

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.

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

 

Przeczytaj również

Dodawanie cienia do elementu HTML – CSS3 W tym wpisie pokaże wam jak w prosty sposób dodać efekt cienia pod dowolny element blokowy np. div lub obrazek. W jednym z wcześniejszych wpisów z ...
Właściwość CSS – resize Dzięki właściwość CSS resize użytkownik zyskuje możliwość zmiany rozmiaru danego pola (np. div lub textarea). Właściwość resize jest ściśle powiąza...
Wyśrodkowanie zawartości kolumn względem siebie na... Dziś zajmiemy się w ostatnich czasach bardzo popularnym problemem czyli wyśrodkowaniem w pionie względem siebie zawartości dwóch lub większej ilości k...
Zmiana wielkości liter z pomocą CSS – text-t... Właściwość text-transform (z języka ang. transformacja tekstu) jest jedną z popularniejszych metod modyfikacji tekstu. Zadaniem własności jest zmiana ...