Animacje przy scrollu

Question

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?

Comments

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

---

ale tutaj opóźniamy to czasowo chyba?

---

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.

Answer 1

Możesz zainteresować się https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia

plus https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/addListener

Answer 2

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.

Answer 3

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. :)