Jak zrobić taki efekt menu jak na tej stronie.

Question

Potrzebuję zrobić jaką animację zwiększania i zmniejszania menu jak na tym demie: http://blackrockdigital.github.io/startbootstrap-grayscale/

Answer 1

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.

Comments

Jak mam to podpiąć do JS

---

Dodajesz klasę z tą animacja na odpowiednim evencie czyli kiedy chcesz żeby się wykonywalo.

---

Coś jak w 3 odcinku css Pana Mirka

---

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");
}

 

 

---

A jak zrobić aby ta animacja robiła się po srcrollowaniu?

---

no to zamiast eventu .click dajesz event .scroll

Answer 2

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.