Wstęp do hamburger menu (część druga)

Ćwiczenie Geek Factory - Hamburger menu
Dodano: Styczeń 29 2018

Tym razem skupiamy się na animacji przycisku. Robimy to dokładnie, dbając o szczegóły animacji. 

Dobra kolejna część wyzwania z hamburgerem. Tym razem  skupimy się na samym kneflu. Znów użyjemy skrypciku z ćwiczenia "ZMIANA WYGLĄDU ELEMENTU PO KLIKNIĘCIU"Spróbujemy wykorzystać CSS3 aby zaanimować przejście pomiędzy stanami przycisku. Najpierw przycisk ma się pojawić na scenie w sposób animowany, ja wybrałem powiększenie ale sposób dowolny. Wygląd przycisku standardowy - 3 paski. Klikamy i górny oraz dolny schodzą się do środka po czym obracają przeciwnie o 45 stopni i tak zostają tworząc X, środkowy natomiast znika. Klikamy znowu po czym przycisk w sposób dokładnie odwrotny wraca do stanu początkowego. 

  • Aby mieć lepszą kontrole ned animacją użyj @keyframes, dzięki temu będzie można określić różne stany animacji a nie tylko początkową i końcową
  • Możesz  dodać animację dla elementu który jest w elemencie nadrzędnym z nowo otrzymaną klasą. Troche zawiłe, ale oto przykład:

    .menu_btn_in .menu_btn_bar_1{
    animation: menu_btn_bar_1_anim_2 1s 1;
    top:50%;
    transform: rotate(-45deg);
    }

  • .menu_btn to nazwa podstawowej klasy (w moim rozwiązaniu) w której znajdują się trzy paski. .menu_btn_in to nazwa którą dodaje po kliknięciu. Kod z wskazówki poniżej wywołuje animację kiedy pojawia się nowa klasa.
  • Pamiętaj o 2 animacjach, osobno dla każdego knefle. Wjazdu i wyjazdu :)
Serwis korzysta z plików cookies w celu świadczenia spersonalizowanych usług na najwyższym poziomie, w tym usług statystycznych oraz w celu dostosowania zawartości do indywidualnych preferencji Użytkowników, zgodnie z Polityką Plików Cookies. Możesz określić warunki przechowywania lub dostępu do plików cookies w Twojej przeglądarce.