Add Dynamic Brightness filter

[bhaktap]

I am trying to use this project in one of our latest websites and found that the brightness filter is missing. Feature request: The background image should get darker/lighter while scrolling the page enabling the foreground text appear better. This similar to blur feature except the filter is on brightness with min and max. It would be even great if we can achieve with a custom color with alpha. Please see if any one of the contributors can implement this.

[rrutsche]

Hi. I will have a look at this brightness filter. Sounds like a good idea. Can you give an example for your custom color idea?

Cheers, Richard

[bhaktap]

Brightness makes the image darker with blackness. Sometimes users might extend this functionality with a custom rgb color with alpha so that it can render fading effect in any color.

for example you can accept separate properties for background alpha...

... //css code; here 0.3 is dynamic from 0 to 0.9(alphaMax) based on scrolling position. //this can be implemented on a masking layer on the top of background image background: rgba(76, 175, 80, 0.3)

If we can achieve this then brightness would be redundant. Hope this helps.

-B

On Mon, May 28, 2018 at 2:07 PM, Richard Rutsche notifications@github.com wrote:

Hi. I will have a look at this brightness filter. Sounds like a good idea. Can you give an example for your custom color idea?

Cheers, Richard

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/RRutsche/react-parallax/issues/46#issuecomment-392603518, or mute the thread https://github.com/notifications/unsubscribe-auth/AbIxVQTsm_5PsinwBWapFIQON3i13JNUks5t3GcIgaJpZM4UPju_ .

[rrutsche]

Hi, sorry for the late response - I had an idea to implement a more generic way for your feature request. We could add a new renderProp (like described here https://reactjs.org/docs/render-props.html) that passes some kind of percentage value. This way you could implement your own layer.

<Parallax
    bgImage="path/to/image"
    renderLayer={percentage => (
        <div
            style={{
                position: 'absolute',
                width: '100%',
                height: '100%',
                background: `rgba(255, 125, 0, ${percentage * 0.9})`,
            }}
        />
    )}
>
    <p>
        parallax content
    </p>                
</Parallax>

The layer would be rendered on top of the image but below the actual parallax content. Do you think you could implement your feature with a prop like this? If yes, the only question for me is: which positions define 0% and 100%. 0% is clear I think - it's when the image enters the screen at the bottom of the viewport. But 100% - should it be when the top of the image matches the top of the viewport? Or should it be 100% when the parallax leaves the viewport...? Whats your opinion?

regards

[bhaktap]

I guess second option is better because ideally we want to hide the image completely while the parallax move away from viewport.

On Sun, Jul 22, 2018, 9:21 AM Richard Rutsche notifications@github.com wrote:

Hi, sorry for the late response - I had an idea to implement a more generic way for your feature request. We could add a new renderProp (like described here https://reactjs.org/docs/render-props.html) that passes some kind of percentage value. This way you could implement your own layer.

<Parallax bgImage="path/to/image" renderLayer={percentage => ( <div style={{ position: 'absolute', width: '100%', height: '100%', background: rgba(255, 125, 0, ${percentage * 0.9}), }} /> )}>

parallax content

The layer would be rendered on top of the image but below the actual parallax content. Do you think you could implement your feature with a prop like this? If yes, the only question for me is: which positions define 0% and 100%. 0% is clear I think - it's when the image enters the screen at the bottom of the viewport. But 100% - should it be when the top of the image matches the top of the viewport? Or should it be 100% when the parallax leaves the viewport...? Whats your opinion? regards — You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub , or mute the thread .

[rrutsche]

Okay, I have implemented something but need some time to test and publish it as I'm on vacation now. Think I will publish it in about 3 weeks. However if you want to test it you can install the package from the github repository itself, branch renderlayer. There is a new render prop called renderLayer that can be used as shown above. Hope this helps.

cheers Richard

[rrutsche]

@bhaktap Sorry for the delay - but it's live now with version 2.0.0

[bhaktap]

Sure will download new version.

On Wed, Sep 12, 2018 at 2:09 PM Richard Rutsche notifications@github.com wrote:

@bhaktap https://github.com/bhaktap Sorry for the delay - but it's live now with version 2.0.0

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/RRutsche/react-parallax/issues/46#issuecomment-420798754, or mute the thread https://github.com/notifications/unsubscribe-auth/AbIxVbDQLJ9O1Aa3PZVFL5rdEQUdwrtEks5uaXgbgaJpZM4UPju_ .

[rrutsche]

I will close this for now. Feel free to re-open this ticket for further discussions.