The js-ratio-#.# class used in the JS intersect function has been updated so you can use the ratio class with or without the decimal point. You can now use the following ratio classes to adjust the intersection observer’s intersection point.
Classes with decimal points:
js-ratio-0.1, js-ratio-0.2, js-ratio-0.3, js-ratio-0.4, js-ratio-0.5, js-ratio-0.6, js-ratio-0.7, js-ratio-0.8, js-ratio-0.9, js-ratio-1.
Classes without decimals
js-ratio-01, js-ratio-02, js-ratio-03, js-ratio-04, js-ratio-05, js-ratio-06, js-ratio-07, js-ratio-08, js-ratio-09, js-ratio-1.
Why the update?
Classes using periods are technically not allowed. While they work for the JS function, you actually can’t use them as classes.
The demo below demonstrates how you can use the new classes, it also is used to test the JS function make sure its functioning as expected. To test js-intersect simply update the class for the JS Intersect Test Wrapper on this page using the new classes.
Tip: Use Desktop (touch) or test on mobile to slowly move each demo section into view so you can catch the change.
10%
20%
30%
40%
50%
60%
70%
80%
90%
100%