Change duration and fade of backstretch

Hi,

I’m using fixed background images on my site. I do this, so when I make a transparent section, the image is shown and it will have an effect like parallax without parallax being activated. This seems to be the only way to create the effect on mobile too.

Now there’s another problem on mobile. When you scroll, the address bar disappears, thus forcing the image to reposition to adept to the new vh. This gives a small jumping effect that I find quite irritating. I’ve been looking on google, but it seems to me there’s no real fix for this problem .

Right now I want to try to make the transitioning more smooth so it will seem intentional. I found the effect is being created by backstretch and now I want to target the duration and speed of the backstretch. How can I do that? Not really very good in js.

Site: https://www.castellum.cafe using the PRO theme

TIA,

Arnold

Hi Arnold,

From your setup, there’s only one image so duration/speed is set to zero actually. See this: https://screencast-o-matic.com/watch/cbjrDjlLPa. That is how image works on backstrech, by nature it is responsive thus on screen size change it will adjust responsively. Check this for more explanation and possible fix.

Hope this helps.

Hi,

I understand now the duration is set to zero, because there’s only one background image. Your suggested solution however doesn’t seem to do anything.
Is there a solution for this problem? I know there’s a whole lot of people searching for this holy grail. Or maybe I’m just not thinking right. Let’s not forget the actual problem is that I want the parallax effect to work on mobile. I know it is possible with sliders, but they propose their own problems in terms of resposibility.

Hi there,

Unfortunately, there is no way I can think of which can help you around regarding this. I suggest that you contact the Backstretch plugin developers as they might have a better insight as they did code the plugin and more qualified to find a solution.

Thank you for your understanding.