Changing the opacity of an element on the scroll gap - how to do it?
There are many elements on the page that should appear (by changing the opacity) when scrolling at a certain interval.
Using one element as an example:
There is a bottom border when the element is completely transparent - 900px
There is a top border when elements are completely opaque - 1100px
Both numbers are not static, of course, their value depends on the screen height and position on the page, but there was nothing difficult to calculate.
And in this gap, when scrolling, the element should either appear or disappear, depending on the direction of the scroll.
I've already cracked my head over the formula, but I can't get it out, although everything seems to be quite simple - all the data is there, you just need to use it correctly.
How to solve this "problem"?jQuery Kira Richmond, Apr 24, 2020
The distance between the maximum and minimum height is taken as 100%. When scrolling, we look at how many people have gone from minimum to maximum in percentage and set the same amount in the opacity value, just do not forget that opacity takes a value from 0 to 1.Anonymous
Use ScollMagic and gsap
Here's a demo: scrollmagic.io/examples/basic/simple_tweening.html
Here's what I got: https://codepen.io/corvus-007/pen/JmOorX a>Anonymous
To place the code, please use CodePen or similar tool. Thanks you!