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

zdjęcia, photos, images

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



Reading Time: 2 minutes

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ż

Ciekawe efekty na tekście z zastosowaniem cienia Tym razem przygotowałam dla was zbiór kilku ciekawych efektów z zastosowaniem text-shadow - czyli cienia pod tekstem. Oczywiście te animacje wykorz...
Ciekawe efekty Parallax / Paralaksy na stronę inte... Parallax po polsku paralaksa jest jednym z popularniejszych efektów stosowanych na stronach internetowych. Do stworzenia efektu prostej paralaksy nie ...
Instalacja darmowego serwera na komputerze –... Podobnie jak XAMPP lub Krasnal, Wamp (Windows, Apache, MySQL, PHP) jest darmowym programem wydanym  na licencji GNU*. Wydaje mnie się że interfejs jes...
Proste rozwijane poziome menu w CSS W tym tygodniu pokażę wam jak zbudować proste poziome rozwijane menu (ang. top dropdown) korzystając z CSS i HTML. Dla nie wtajemniczonych chodzi o ta...

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *