Parallax Not Working

Hi,

For me dosen’t work the header but the central yes i can see the parallax effect, i use last version of safari.

I try the link on firefox and work like safari.

Tomorrow put the website online and write here the link.

Thanks.

this is my div at the moment: hope can help…

<div style=”margin-bottom:0px;margin-top:0px;padding-top:80px;background-image: url(https://localhost:8888/ing3nious/wp-content/uploads/2015/10/BG_hero-2.jpg); background-position: center; background-repeat: no-repeat;background-size: cover;” data-stellar-background-ratio=”0.5″ class=”panel-row-style” >

this is yours, i can see only data-stretch-type=”full” like a different

<div class=”siteorigin-panels-stretch panel-row-style” style=”padding: 75px 40px; background-image: url(https://layouts.siteorigin.com/wp-content/uploads/2015/10/crossfit-534615_1920.jpg); background-size: cover; margin-left: -40px; margin-right: -40px; border-left-width: 0px; border-right-width: 0px; background-position: 50% 52.3203125px; background-repeat: no-repeat no-repeat;” data-stretch-type=”full” data-stellar-background-ratio=”0.5″>

Misplon,

So we are using Page Builder on about 20 sites so far. Not all of them use Parallax, but as we started updating more sites, we have been seeing some display issues with parallax in version 2.2.1:

Version 2.2 works fine here in production:
https://apiams.com/

Version 2.2.1 does not work correctly here in staging:
https://apiams.staging.wpengine.com/
(Look at the image with the US Flag near bottom of home page and you’ll see what I mean)

Hopefully this may help you track down the problem ??

Hi localfresh

WP Engine’s staging environments come in to save the day ??

I can see what’s happening there. It seems like that’s a bit of a fault/limitation in the parallax library we’re using. It has something to do with the size of the image.

Right now, I think the only real solution would be for me to write a custom parallax library from scratch that combines the best parts of both libraries that we’ve used to make something that works in all situations.

For now, a temporary solution would be to change the size of the image you’re using for the parallax background. Changing the aspect ratio is what would “trick” this parallax library into working. So either cutting some of the sides of the images off, or cutting some of the top and bottom off.

Hi Greg,

this is my website link: https://ingenious.immcographic.com

I’m don’t sure to have understand, could be a good trick make a differente size the image?
like make more small? but anyway i need 1280 x 400 min…. or probably i don’t have understand good…

Thanks Greg. I guess we could try reformatting images but I don’t understand why it works fine in V 2.2 and earlier, but not in V 2.2.1 …. couldn’t you revert the code to resolve it Cheers.

Thank you all for pitching in.

@greg Priday
I found that if I go to the layout of the row and choose full width, the parallax effects start working but the quality of the picture is still bad. If the layout of the row is standard, there are no parallax effects whatsoever.

Please see the example here: https://www.polygonherbs.com/front/

The version is 2.2.1 at the moment. The first row is created with a third party plugin and the second row is generated using the built in parallax effect of page builder. You can see the difference in the quality of the background picture.

P.S.

Version 2.2 gives me the same effects as the first row only much better. The Parallax effects are far nicer than the first row because the position of the picture is not fixed and it moves nicely the way it does in 2.2.

So I guess what you’re trying to do (combining the two and choosing the best effects of each) would certainly be the best move.

Thank you.

@greg Priday

And yes, the sports layout does work with my theme. That’s how I got the idea to try the full width layout for my page and it worked.

By the way, the sports layout doesn’t seem to come with all the assets. The background picture crossfit-534615_1920.jpg is not included in the plugin and I had to download it from your site.

Thanks for your help.