Jak zrobić animacje tła menu

pytanie zadane 9 lipca 2018 w HTML i CSS przez extr4v3rT Początkujący (440 p.)
zmienione kategorie 10 lipca 2018 przez Patrycjerz

Witam, pisze z zapytaniem jak można zrobić taką animacje menu, to znaczy, jak zrobic te pojawiające się tło po przescrollowaniu. Jak to zrobić? Pozdrawiam.

komentarz 9 lipca 2018 przez Mariusz08 Maniak (62,300 p.)

Zła kategoria

komentarz 9 lipca 2018 przez Tomek Sochacki Ekspert (227,510 p.)

Ale jaka animacja bo niebyt rozumiem... tam jest po prostu jakieś video na początku i tyle, chyba, że u mnie na Chromie nie wszystko się pokazuje...

komentarz 9 lipca 2018 przez Kamil Batorski Obywatel (1,870 p.)

Ta animacja to nic trudnego, zrób to co Ci mówi i się uda

1. Napisz diva odpowiadającego za tło.

2. Wrzuć żeby jego tłem (100% width!!!) było wskazane video.

3. Napisz autoplay i loop filmu w javascript.

Gotowe! Jeśli masz problemy pisz napisze Ci to. :D

komentarz 10 lipca 2018 przez extr4v3rT Początkujący (440 p.)

mi chodzi o to ze jak zjedziecie troche na dół strony to wtedy u góry tam gdzie jest menu ukaze sie animacja o taka ^^ to szare tło na menu.

1 odpowiedź

odpowiedź 10 lipca 2018 przez cz3ran Stary wyjadacz (13,380 p.)

Na to składa się kilka rzeczy, po pierwsze musisz mieć dwie klasy - jedną dla menu, które jest na górze (zwykły ostylowany div), drugą tak żeby to menu miało position fixed - menu będzie przyklejone w wyznazonym przez Ciebie miejscu (pewnie na samej górze). Następnie na podstawie scrolla w JS ustawiasz zmianę klasy - jeżeli scroll < Twoja wartość, nadajesz mu zwykłą klasę, natomiast w przeciwnym razie dajesz klasę z fixed.

Jeżeli chodzi o animację, wydaje mi się że w tym przypadku wystarczy zastosować transition dla wysokości i koloru - przy zmiane klasy opcja transition doda Ci porządaną animację (jeżeli chcesz zrobić coś bardziej wymyślnego, możesz użyć animation zamiast transition. Jeżeli chcesz się nauczyć animowania w CSS (podstaw), polecam tego Pana na YT - https://www.youtube.com/watch?v=8kK-cA99SA0&list=PLqGj3iMvMa4LvJ8VctoXnPI0dtE40wfid.

Jeżeli będziesz miał jakieś problemy, w necie masz od groma różnych przykładów, wystarczy wpisać animationed sticky header/menu w google i masz.

komentarz 11 lipca 2018 przez extr4v3rT Początkujący (440 p.)

a mogłby pan napisać tą funkcje w js ? :D

komentarz 12 lipca 2018 przez EdeX Mądrala (5,110 p.)

Tą funkcję już dał kiedyś w filmie Pan Zelent. To był film o rozwijanym, przyklejanym menu. HTML chyba 4. Wystarczy zmienić kod na własne potrzeby

komentarz 12 lipca 2018 przez cz3ran Stary wyjadacz (13,380 p.)

@extr4v3rT, już pare razy za napisanie kodu zostałem przez resztę zrugany, więc mam nadzieję że kroki, które wymieniłem wystarczą, ewentualnie możesz znaleźć jakieś gotowe rozwiązania.