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

Parallax relatywnie do rodzica

Object Storage Arubacloud
0 głosów
87 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ź 266 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)
0 głosów
0 odpowiedzi 115 wizyt
pytanie zadane 11 grudnia 2019 w JavaScript przez mola85 Początkujący (320 p.)
0 głosów
1 odpowiedź 365 wizyt
pytanie zadane 24 marca 2018 w HTML i CSS przez BlaBlaCar Początkujący (440 p.)

92,584 zapytań

141,434 odpowiedzi

319,671 komentarzy

61,968 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

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

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!

...