I'm attempting to use react-spring
to create a parallax effect on my site. I want the parallax container to be the background of the entire site, plus a 100vh "footer" at the bottom. Here's a simple diagram of what I mean:
My issue is, according to the react-spring parallax docs, the Parallax container requires a pages
attribute, which "Determines the total space of the inner content where each page takes 100% of the visible container".
From my understand of this, as well as my testing, this means that I have to explicitly set the entire height of that Parallax Container based on divisions of 100% viewport height. This means I can't just have the Parallax Container contain the content of my site, which doesn't have a preset height, let alone height divided by 100vh.
So my question is, can I have the Parallax Container of react-spring
contain exactly my entire site's content, plus a 100vh at the bottom?
Here's a sandbox demo of my problem, with the Parallax pages
attribute set on line 29: https://codesandbox.io/embed/react-spring-pageheight-question-c12er