12-03-2018 | Programming
Icon buttons

Koncept:

Pomysł na te realizacje był następujący: element menu, który po najechaniu kursorem płynie przebudowuje sie w ikonkę. Pomysł wydawałoby sie prosty, ale zanim doszedłem do realizacji to musiałem rozwiązać dwie kluczowe kwestii. Po pierwsze jakie elementy menu mogą być tu wzięte pod uwagę i w jakie ikony mogą się zamienić. Po szeregu szkiców zdecydowałem się na użycie następującego zestawu: Home, Gallery, Contact, News. Założeniem było że jedna liter zmienia sie w jedna kreskę z której budowana będzie ikona, ale tutaj doszedłem do drugiego wyzwania. okazało się bowiem to że niektóre ikony wymagają więcej elementów składowych niż mam dostępnych liter. Ale to postanowiłem obejść już samym kodem (jakoś się wyczaruje dodatkowe kreski). Jak już wszystkie kwestie miałem rozwiązane to przystąpiłem do realizacji

Realizacja:

Uzyskanie oczekiwanego efektu wymagało kilku kroków. w html’u są po prostu divy z treścią. następnie funkcja js’owa bierze taki tekst i rozbija go na poszczególne litery. Każda z liter jest w osobnym bloku, pozwala to w łatwy sposób manipulować poszczególnymi elementami. Każda z liter zamienia się w jedna kreskę z której budowane są potem ikony. W ikonach gdzie liczba liter (kresek) była za mała do uzyskania wymaganego kształtu, dodałem elementy before.  Sama animacja wykonana jest wyłącznie w CSS-ie. opiera się o wykorzystanie pseudoklas hover i before oraz właściwość transition. Miejscami dodane jest także opóźnienie wykonania akcji. Jako że elementy menu oraz ikony są „Szyte na miarę” to animacja każdego z elementów jest dokładnie dopasowana do konkretnego case’a.

Efekt końcowy