• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Animacja hamburgera - jak odwrócić kierunek ruchu środkowej lini?

VPS Starter Arubacloud
0 głosów
164 wizyt
pytanie zadane 19 października 2020 w HTML i CSS przez nowa Początkujący (450 p.)

Hej, chciałabym by ruch środkowej lini w hamburgerze był wykonywany w prawo, a nie w lewo jak w tej chwili. Zmieniałam kod na różne sposoby, zmieniałam także kod na liczby ujemne i odwrotnie, ale zachowanie animacji hamburgera jest dla mnie nadal zagadką :/

Mógłby ktoś mi pomóc i powiedzieć co muszę zmienić by linia środowa uciekała w prawą stronę?

Pozdrawiam i z góry dziękuję :)

 

<div class="menu-btn">
    <div class="menu-btn__burger"></div>
</div>

<!-- how look hamburger on css -->
.menu-btn__burger::before,
    .menu-btn__burger::after {
      margin-left: 10px;
    }

    .menu-btn {
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      width: 80px;
      height: 80px;
      cursor: pointer;
      transition: all .1s ease-in-out;
      left: 250px;
    }

    .menu-btn__burger {
      width: 50px;
      height: 6px;
      background: #181543;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
      transition: all .1s ease-in-out;
    }

    .menu-btn__burger::before,
    .menu-btn__burger::after {
      content: '';
      position: absolute;
      width: 50px;
      height: 6px;
      background: #181543;
      border-radius: 5px;
      box-shadow: 0 2px 5px rgba(255, 101, 47, .2);
      transition: all .1s ease-in-out;
    }

    .menu-btn__burger::before {
      transform: translateY(-16px);
    }

    .menu-btn__burger::after {
      transform: translateY(16px);
    }


   /* how hamburger are animation */



 .menu-btn.open .menu-btn__burger {
      transform: translateX(-50px);
      background: transparent;
      box-shadow: none;
    }

    .menu-btn.open .menu-btn__burger::before {
      transform: rotate(45deg) translate(35px, -35px);
    }

    .menu-btn.open .menu-btn__burger::after {
      transform: rotate(-45deg) translate(35px, 35px);
    }
   
css

 

komentarz 19 października 2020 przez Wiciorny Ekspert (269,120 p.)
edycja 19 października 2020 przez ScriptyChris
Rozumiem w takim razie, że kod nie należy do CIebie...
wklej to w taki sposób żeby działalo np poprzez js-fiddle
1
komentarz 19 października 2020 przez nowa Początkujący (450 p.)

Hej, niestety to nie mój kod. Animacje hamburgerów zawsze mnie przerażały więc posługiwałam się (o ile oczywiście mogłam) udostępnionym przez innych kodem.

Link do animacji jakby ktoś chciał zerknąć, bo może a nuż ktoś szuka takiego rozwiązania : https://jsfiddle.net/szachistka/qv01mLst/7/

1 odpowiedź

+1 głos
odpowiedź 19 października 2020 przez DawidK Nałogowiec (37,910 p.)
wybrane 20 października 2020 przez ScriptyChris
 
Najlepsza

Zmiana

        .menu-btn__burger::before,
        .menu-btn__burger::after {
            margin-left: -10px;
        }

przesunie Ci środkową kreskę, a tak naprawdę to przesunie górną i dolną, tak, że środkowa będzie wyglądała jak wysunięta w prawo.

komentarz 19 października 2020 przez nowa Początkujący (450 p.)
edycja 19 października 2020 przez nowa

Dziękuję bardzo :) Zaraz wypróbuję :)

Ps. Nie zupełnie mi o to chodziło ;) Wygląd hamburgera został lekko zmodyfikowany z gotowego kodu i tam musi wyglądać. Chodzi o zmianę kierunku "uciekającej" środkowej kreseczki, która obecnie ucieka w lewo, a powinna w prawo.

Tu widać  obecną animację ;) https://jsfiddle.net/szachistka/qv01mLst/7/

komentarz 19 października 2020 przez DawidK Nałogowiec (37,910 p.)

Przepraszam niedoczytałem, zmień jeszcze ten fragment

.menu-btn.open .menu-btn__burger {
            transform: translateX(50px);
            background: transparent;
            box-shadow: none;
        }

        .menu-btn.open .menu-btn__burger::before {
            transform: rotate(45deg) translate(-35px, 35px);
        }

        .menu-btn.open .menu-btn__burger::after {
            transform: rotate(-45deg) translate(-35px, -35px);
        }

żeby manipulować położeniem po animacji. Chodzi głównie o translateX() z klasy

.menu-btn.open .menu-btn__burger

czyli końcowa współrzędna X środkowej kreski. Animacja będzie Ci ją przesuwać po osi X z prędkością zdefiniowaną w:

transition: all .1s ease-in-out;

chcesz, żeby przesuneła się w prawo, więc wartość musi być dodatnia.

Pozatym musisz zadbać, żeby krzyżyk Ci się nie rozjechał stąd jeszcze zmiany we współrzędnych X i Y górnej i dolnej kreski czyli pseudoelementy:

.menu-btn.open .menu-btn__burger::before

i

 .menu-btn.open .menu-btn__burger::after

oraz ich translate po osi X i Y

komentarz 19 października 2020 przez nowa Początkujący (450 p.)
Bardzo dziękuję, pomogło :)

Podziwiam Cię za odczytywanie i wyobrażanie sobie animacji tego typu :)

Pozdrawiam

Podobne pytania

+1 głos
2 odpowiedzi 246 wizyt
pytanie zadane 2 sierpnia 2021 w JavaScript przez chrystian Gaduła (4,780 p.)
+2 głosów
1 odpowiedź 212 wizyt
pytanie zadane 28 czerwca 2021 w JavaScript przez xjafajx Użytkownik (740 p.)
0 głosów
2 odpowiedzi 142 wizyt

92,451 zapytań

141,261 odpowiedzi

319,073 komentarzy

61,853 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...