ParallaxHeaderWithSvg

ParallaxHeaderWithSvg component is a naive implementation of a parallax effect for use at the top of a page. It features the following behavior.

size the component to the height and width of current window
resize in response to the window resizing
accomodate a header offset for layouts with a fixed header
apply a grid to the component
render children on the foreground layer of the grid
display a componment passed in as a component prop on the background layer the grid
set the background layer of the grid to position: absolute so it stays in place as the page scrolls

See a full page use of the component here using the following code.

TODO: fix the jump on page load
TODO: add a prop for header height offset (shouldn't be hardwired - or should it??)
TODO: variants for color...
TODO: In fact this should not be a component but should be a layout where this component wraps header animated scroll bar and whatever else

jsx

<ParallaxHeaderWithSvg component={<SiteLogo size="inherit" />}>
  <Box variant="layout.constrained" color="chromeText">
    <Heading as="h1">ParallaxHeaderWithSvg full page Demo</Heading>
    <Text variant="ui.9" p={3}>
      <Link variant="chrome" href="/documentation/split-screen/">
        <IoArrowUndoOutline />
        Back to SplitScreen ParallaxHeaderWithSvg
      </Link>
    </Text>
  </Box>
  <AnimatedScrollPrompt
    color="chromeText"
    background="rgb(0, 0, 0, 0.25)"
    delay="1000ms"
  />
</ParallaxHeaderWithSvg>