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

animacja przejścia

Mały hosting, OGROMNE możliwości
0 głosów
266 wizyt
pytanie zadane 22 listopada 2019 w JavaScript przez eMe Początkujący (340 p.)
Witam, interesuje mnie animacja przejścia do podstrony (nie scrollowania do danego elementu na stronie głównej), żeby jakoś to wyglądało,a nie jak jest teraz, że strona się otwiera i wygląda to tak "płytko". Niestety na google'u nic nie znalazłem :/
komentarz 22 listopada 2019 przez ScriptyChris Mędrzec (190,170 p.)

żeby jakoś to wyglądało,a nie jak jest teraz, że strona się otwiera i wygląda to tak "płytko"

Wstaw proszę aktualny kod (albo podaj przynajmniej linka do strony, jeśli jest gdzieś publicznie dostępna), żeby można było sprawdzić jak to działa teraz.

1 odpowiedź

+1 głos
odpowiedź 23 listopada 2019 przez Comandeer Guru (607,960 p.)

Tego typu rozwiązania nie są trywialne. Trzeba:

  1. Wykrywać kliknięcia w linki do tego samego originu (w uproszczeniu można przyjąć, że chodzi o tę samą domenę). Tutaj przyda się event delegation.
  2. Pobierać żądaną stronę w tle, co wymusza prawdopodobnie równoczesne pokazanie jakiegoś subtelnego loadera. Można to też ograć inaczej, przy pomocy Service Workera. Wówczas, zgodnie ze wzorcem PRPL, można pobrać inne podstrony w tle, gdy użytkownik przegląda stronę. Wtedy będą po prostu gotowe. Można też robić szybki preload, gdy user zbliża myszkę do konkretnego linku.
  3. Gdy mamy już pobraną stronę, trzeba wyciąć z niej treść i wstawić do jakiegoś ukrytego elementu na stronie.
  4. I teraz animujemy element ze starą treścią i pokazujemy element z nową. Stary element usuwamy, bo nie jest już potrzebny.
  5. Wypada jeszcze zmienić adres URL w przeglądarce, do czego posłuży nam History API.

Podobne pytania

0 głosów
1 odpowiedź 353 wizyt
pytanie zadane 4 czerwca 2021 w HTML i CSS przez hakiros54 Obywatel (1,160 p.)
0 głosów
1 odpowiedź 304 wizyt
pytanie zadane 4 kwietnia 2018 w HTML i CSS przez timati Bywalec (2,060 p.)
0 głosów
1 odpowiedź 456 wizyt
pytanie zadane 13 listopada 2021 w JavaScript przez Jacek Śmiel Użytkownik (510 p.)

93,717 zapytań

142,629 odpowiedzi

323,261 komentarzy

63,261 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

Twierdza Linux. Bezpieczeństwo dla dociekliwych

Aby uzyskać rabat -10%, użyjcie kodu pasja-linux, wpisując go w specjalne pole w koszyku.

...