Almost always debounce scroll events to improve performance.
Debouncing means lessening the frequency of detection of that event
window properties:
scrollY
innerHeight
image properties:
offsetTop
height
In the code, the key concept is that the “middle” variable is stuck to the offset of the window as a whole and the “offsetTop” property is stuck to the image. The middle has been adjusted in a way i.e by subtracting image.height/2 from the total value in such a way that when the middle is greater than offsetTop of the image, the center of the image is below halfway off the screen.
No comments:
Post a Comment