search

jscottsmith / react-scroll-parallax

🔮 React hooks and components to create parallax scroll effects for banners, images or any other DOM elements.
https://react-scroll-parallax.damnthat.tv/
MIT License
2.89k stars 160 forks source link

support webp as image banner #52

Closed dohomi closed 5 years ago

dohomi commented 5 years ago

Hello,

If layers image consist of a WebP image format they are not been rendered with ParallaxBanner. I am not sure if this is actually a feature or bug at the moment. This is an example setup:

<ParallaxBanner layers={[image: 'image-url.webp']} /> // not applied as background
<ParallaxBanner layers={[image: 'image:'image-url.jpg']} /> // works

Best, Dominic

jscottsmith commented 5 years ago

@dohomi What browser? Support for WebP is still limited https://caniuse.com/#feat=webp

I'd recommend feature detection and pass the appropriate type of image prop to the component. Not much I can do about this in the component itself I'm afraid.

dohomi commented 5 years ago

Hi @jscottsmith I do webp detection and only in use with ParallaxBanner the image is not being loaded. I use an the image proxy this are the URLs maybe its because of the URL schema?

path-to-img/filters:format(webp)/account.jpg // does not work
path-to-img/account.jpg

Is there maybe an issue of using the filters:format(webp) as a string? Thats the syntax of Storyblok image proxy API. Thanks for your swift response

jscottsmith commented 5 years ago

Hmm, I'm not totally following.

Is your code publicly accessible? Might help me understand the issue more clearly. Or put together a simple demo that reproduces the issue. Happy to take a look if so.

filters:format(webp) is a transformation expression for Storyblok I guess... What's the output in the browser? Is it adding valid styles to the DOM?

<div class="parallax-banner-layer-1" style="background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/105988/banner-foreground.png'); background-position: center center; background-size: cover; position: absolute; top: -25%; right: 0px; bottom: -25%; left: 0px;"></div>
dohomi commented 5 years ago

@jscottsmith I forgot to wrap the img src as string correctly. All good sorry for the noise and thanks for the excellent component.