Przyspieszanie widocznych elementów na scrollu

Question

Hej,

 

W jaki sposób przyspieszyć scrollowanie widocznych elementów na stronie (jak np. tutaj: https://codepen.io/JTParrett/pen/BkDie?editors=0010) ?

 

Chciałem zrobić to za pomocą IntersectionObservera, jednak transform wykonuje się tylko przy wchodzeniu i wychodzneiu z viewportu i wędrują zbyt wysoko podczas scrollowania:

import { useEffect } from 'react'
import { TweenMax } from 'gsap'


let options = {
  root: null,
  rootMargin: '0px',
  threshold: []
}

for (let i=0; i<=1.0; i+= 0.01) {
  options.threshold.push(i)
}

let visibleElements = []

export default function useParallax(parallaxedElements) {

  const initObserver = (parallaxedElements) => {
    let observer = new IntersectionObserver(handleIntersect, options)

    function handleIntersect (entries) {

      entries.forEach(entry => {
        if (entry.intersectionRatio > 0) {
          visibleElements.push(entry.target)
          TweenMax.set(entry.target, { y: + -(window.pageYOffset / 2) })
        } else {
          const index = visibleElements.indexOf(entry.target)

          if (index > -1) {
            visibleElements.splice(index, 1)
          }
        }
      })
    }

    for (let i = 0; i < parallaxedElements.length; i++) {
      if (parallaxedElements[i].current) {
        observer.observe(parallaxedElements[i].current)
      }
    }
  }


  useEffect(() => {

    initObserver(parallaxedElements)
  })
}

 

Answer 1

Nie dokońca rozumiem, jaki masz zamiar ale możesz próbować dwojako raz przez position sticky. 2. możesz utworzyć przecież handleListenera do scrolla, i pobrać wartości pozycji scrolla w osiY, następnie nadpisanie standardowej wartości state style, plus transition na transform by pięknie się animowało.