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

Animacje przy scrollu

Object Storage Arubacloud
0 głosów
217 wizyt
pytanie zadane 4 czerwca 2020 w JavaScript przez wariacik Użytkownik (680 p.)
Czesc. Mam mały problem. Dodaje animacje na strone przy scrollu. Przykładowo dodaje klase active do h1 przy przescrollowaniu strony o 100px i animuje w ten sposób transform: scale(0) do scale(1). Na telefonie wygląda to ok ale na ekranie komputera już nie ponieważ animacja dodaje się za wcześnie. Na widoku desktopowym chciałbym aby klasa active dodała się po 300px scrolla. Czy jest jakiś sposób jak to zrobić? Może coś w stylu media queries tylko w JS?
komentarz 4 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)

Ja osobiście korzystam z takiego prostego rozszerzenia pisanego w js: https://scrollrevealjs.org. Korzystam dość długo i polecam.

komentarz 4 czerwca 2020 przez wariacik Użytkownik (680 p.)
ale tutaj opóźniamy to czasowo chyba?
komentarz 5 czerwca 2020 przez Bakkit Dyskutant (7,600 p.)
Animacja odtwarza się gdy element będzie widoczny na ekranie widza. Możesz dodatkowo opóźnić odtworzenie o parę sekund od wyświetlenia się elementu w oknie przeglądarki.

3 odpowiedzi

0 głosów
odpowiedź 5 czerwca 2020 przez lapa19904 Stary wyjadacz (11,560 p.)
Ja bym to rozwiązał dodaniem dwóch klas do h1 scroll po 300px i po 100px z transition na scale, a w media querries wyczyściłbym jedną klasę, a bez tego drugą. Najlepiej jak byś miał osobny css dla mobilki.
0 głosów
odpowiedź 5 czerwca 2020 przez WasiliewSaszka Użytkownik (700 p.)

Możesz wrzucić to w css:

transition: all ease-in-out 300ms;

Spowolni to wszystkiego rodzaju animacje który mają się wyświetlić o czas który wyznaczysz w milisekundach (tu dla przykładu 300ms)

Nie jestem w 100% pewien czy to będzie rozwiązanie twojego problemu, ale przetestować zawsze warto. :)

Podobne pytania

+1 głos
1 odpowiedź 292 wizyt
pytanie zadane 24 listopada 2020 w HTML i CSS przez urban0101 Początkujący (430 p.)
0 głosów
2 odpowiedzi 470 wizyt
pytanie zadane 13 czerwca 2016 w JavaScript przez Alterwar Dyskutant (7,650 p.)
0 głosów
1 odpowiedź 77 wizyt
pytanie zadane 11 marca 2021 w JavaScript przez urban0101 Początkujący (430 p.)

92,669 zapytań

141,567 odpowiedzi

320,033 komentarzy

62,034 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

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!

...