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

Parallax relatywnie do rodzica

HackNation - ogólnopolski hackathon
0 głosów
140 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ź 448 wizyt
pytanie zadane 14 sierpnia 2021 w HTML i CSS przez NA Użytkownik (590 p.)
0 głosów
0 odpowiedzi 159 wizyt
pytanie zadane 11 grudnia 2019 w JavaScript przez mola85 Początkujący (320 p.)
0 głosów
1 odpowiedź 546 wizyt
pytanie zadane 24 marca 2018 w HTML i CSS przez BlaBlaCar Początkujący (440 p.)

93,626 zapytań

142,549 odpowiedzi

323,034 komentarzy

63,129 pasjonatów

Advent of Code 2025

Top 15 użytkowników

  1. 1452p. - dia-Chann
  2. 1437p. - DziarnowskiJ
  3. 1411p. - Łukasz Piwowar
  4. 1291p. - CC PL
  5. 1275p. - Maurycy W
  6. 1254p. - raydeal
  7. 1254p. - Adrian Wieprzkowicz
  8. 1219p. - robwarsz
  9. 1141p. - ssynowiec
  10. 1134p. - Tomasz Bielak
  11. 1116p. - rucin93
  12. 1100p. - Mariusz Fornal
  13. 885p. - Dominik Łempicki (kapitan)
  14. 847p. - Grzegorz Aleksander Klementowski
  15. 838p. - Wojciech Malicki
Szczegóły i pełne wyniki

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

Kursy INF.02 i INF.03
...