Please see Codepen to understand better what I am trying to explain. You can follow the console to see the values of the variables in the code as you scroll.
In section 2 I have three panels (panel 1, panel 2 and panel 3), which I want to keep track of through three separate progress bars as I'm scrolling. So, as I'm scrolling through section 2, while panel 1 is in view - the progress bar for panel 1 should fill and so on for panel 2 and panel 3.
For panel 1 to be in view, section 2 starts at 0% and ends at 22%, which (I think) is: sectionProgress / 22 - with sectionProgress being how much I've scrolled in section 2. However, panel 2 starts at 22% from section 2 and ends at 75%, while panel 3 starts at 75% and ends at 100% <- and this is where I'm lost as to what formula to use.
To put it more simply:
when panel 1 is in view:
- 0% from section 2 === 0% on progress bar for panel 1
- . . .
- 22% from section 2 === 100% on progress bar for panel 1
when panel 2 is in view:
- 22% from section 2 === 0% on progress bar for panel 2
- . . .
- 75% from section 2 === 100% on progress bar for panel 2
when panel 3 is in view:
- 75% from section 2 === 0% on progress bar for panel 3
- . . .
- 100% from section 2 === 100% on progress bar for panel 3
from JS. How to track progress of three separate sections within the same container
No comments:
Post a Comment