search

rrutsche / react-parallax

A React Component for parallax effect
MIT License
847 stars 76 forks source link

Set parallax to fill container #52

Closed Toonshorty closed 5 years ago

Toonshorty commented 5 years ago

I have a flexbox with two elements at 50% width each, one is a div with text content (dynamic height) and the other is the parallax image. I have configured it so that the parallax container will be the same height as the text content. I have applied a flex-grow style to the parallax container which works fine, but the image size is based on the content (.react-parallax-content) size, which doesn't scale. If I manually put a 100% height style on the content div and scroll, the image resizes correctly. Without this though, the image doesn't size correctly and you get white space at the bottom.

Would it be possible to add a prop which allows us to apply either a custom class or style to the content element? That way we can set the height to 100% if required.

I've created a demo for reference here: https://71k4znj1lx.codesandbox.io/

rrutsche commented 5 years ago

Hi. Thanks for the codesandbox example. It's really helpful to get into the topic, thumbs up. Hi will have a look and probably add a new classname prop for it. I'll let you know when I added it.

greetings

rrutsche commented 5 years ago

v2.0.1 introduces a new prop contentClassName, is live and can be used.

greetings