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

Parallax relatywnie do rodzica

42 Warsaw Coding Academy
0 głosów
106 wizyt
pytanie zadane 27 listopada 2019 w JavaScript przez Bakr Mądrala (6,850 p.)
edycja 27 listopada 2019 przez Bakr

Witam,

Chciałbym osiągnąć efekt podobny do tego: https://xaviercusso.com/#/project/stoooorm

Chodzi o to, że podczas scrollowania numerki obok grafik scrollują się z różną prędkością, tak że są na dole obrazka, kiedy ten wychodzi z viewportu.

const scrollHandler = (containerHeight, scrollableElementHeight) => {
    const rect = scrollableElement.current.getBoundingClientRect()
    const visibleElementY = rect.top

    TweenLite.to(scrollableElement.current, 0.5, {
      duration: 0.5,
      ease: "expo.out",
      yPercent: (visibleElementY * (scrollableElementHeight / containerHeight) )
    })
  }

  const containerHeight = container.current.offsetHeight
  const scrollableElementHeight = scrollableElement.current.offsetHeight

  window.addEventListener('scroll', throttle(() => {
    scrollHandler(containerHeight, scrollableElementHeight)
  }, 200))

 

Zaloguj lub zarejestruj się, aby odpowiedzieć na to pytanie.

Podobne pytania

+1 głos
1 odpowiedź 407 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)
0 głosów
0 odpowiedzi 133 wizyt
pytanie zadane 11 grudnia 2019 w JavaScript przez mola85 Początkujący (320 p.)
0 głosów
1 odpowiedź 461 wizyt
pytanie zadane 24 marca 2018 w HTML i CSS przez BlaBlaCar Początkujący (440 p.)

93,395 zapytań

142,388 odpowiedzi

322,566 komentarzy

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

VMware Cloud PRO - przenieś swoją infrastrukturę IT do chmury
...