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

Jak zrobić taki efekt menu jak na tej stronie.

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
820 wizyt
pytanie zadane 27 czerwca 2016 w HTML i CSS przez Jakub Wróbel Użytkownik (920 p.)
Potrzebuję zrobić jaką animację zwiększania i zmniejszania menu jak na tym demie: http://blackrockdigital.github.io/startbootstrap-grayscale/

2 odpowiedzi

0 głosów
odpowiedź 27 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)
wybrane 27 czerwca 2016 przez Jakub Wróbel
 
Najlepsza

no to robisz animację w CSS http://webkod.pl/kurs-css/lekcje/dzial-1/keyframes-selektory-czasu-animacji

Wyglądać to będzie mniej więcej tak:

@keyframes animacja
{
0%{height: 100px;}
100%{height: 50px;}
}

A później w JS podpinasz tą animację i masz wszystko gotowe.

komentarz 27 czerwca 2016 przez Jakub Wróbel Użytkownik (920 p.)
Jak mam to podpiąć do JS
komentarz 27 czerwca 2016 przez uRTLy Bywalec (2,420 p.)
Dodajesz klasę z tą animacja na odpowiednim evencie czyli kiedy chcesz żeby się wykonywalo.
komentarz 27 czerwca 2016 przez Jakub Wróbel Użytkownik (920 p.)
Coś jak w 3 odcinku css Pana Mirka
komentarz 27 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)

No to tak: dajesz jakiś event, później dodajesz style dla elementu i gotowe. Na przykład zróbmy animację dla klasy "menu|" która odpali się po kliknięciu w element o klasie "klik":

$(".klik").click(function() 
{
 $(".menu").css("animation-name", "animacja");
 $(".menu").css("animation-duration", "1s");
}

 

 

 

komentarz 27 czerwca 2016 przez Jakub Wróbel Użytkownik (920 p.)
A jak zrobić aby ta animacja robiła się po srcrollowaniu?
komentarz 27 czerwca 2016 przez CzikaCarry Szeryf (75,340 p.)

no to zamiast eventu .click dajesz event .scroll

0 głosów
odpowiedź 27 czerwca 2016 przez MichuDev Pasjonat (20,300 p.)

Tworzysz animację tak jak pokazał użytkownik CzikaCarry, następnie tworzysz klasę w CSS, w której znajdzie się wpis: 

.animated {
animation-name: example; // nazwa 
animation-duration: 4s; // czas trwania animacji
}

Następnie reagujesz na zdarzenie w JavaScript i dodajesz klasę animated. Możesz również posłużyć się stylizowaniem elementu bez użycia tej klasy (czyste stylizowanie) w JavaScript.

Podobne pytania

+1 głos
2 odpowiedzi 303 wizyt
0 głosów
2 odpowiedzi 749 wizyt
pytanie zadane 31 sierpnia 2015 w HTML i CSS przez niezalogowany
0 głosów
5 odpowiedzi 956 wizyt
pytanie zadane 26 lipca 2015 w HTML i CSS przez b00ny Mądrala (6,050 p.)

93,187 zapytań

142,203 odpowiedzi

322,023 komentarzy

62,513 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 2581p. - dia-Chann
  2. 2537p. - Łukasz Piwowar
  3. 2528p. - Łukasz Eckert
  4. 2514p. - CC PL
  5. 2445p. - Łukasz Siedlecki
  6. 2443p. - rucin93
  7. 2252p. - Tomasz Bielak
  8. 2201p. - Michal Drewniak
  9. 2156p. - Marcin Putra
  10. 2152p. - Adrian Wieprzkowicz
  11. 2105p. - Mikbac
  12. 1941p. - Anonim 3619784
  13. 1733p. - rafalszastok
  14. 1480p. - Michał Telesz
  15. 1469p. - ssynowiec
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...