Banner image stack - recommended size of image for parallax effect to avoid magnification and jumping image when page loads

I was experimenting with the parallax effect of the Banner Image stack and was noticing the following behavior:

When I turn parallax on, the banner image is automatically blown into (I guess to make sure I have enough image left - top and bottom - for the effect). It’s even briefly jumping from full size banner image to magnified banner image when the web page loads.

How can I avoid this? Is this normal or is this a bug?

Or are there recommended “extra” dimensions I have to provide in my banner image so that the stack doesn’t have to blow into it? Is there a rule of thumb?

Thanks for any insight.

Here’s the web site that shows that behavior:
The home page banner briefly jumps.
The other pages that have parallax turned off for the banner image don’t do that.

Hi there @Markus

When I load your URL I’m not seeing the image jump myself. That said, the image is scaled to be able to provide the parallax effect. That is just how it works.

I see it in my iPhone the moment I start scrolling. Perhaps you can experiment with different image sizes?

I just enabled “parallax” on all banners of my website - - On some of the other pages the quick jump at the beginning is really pronounced. I don’t see the jumps in Safari, but it happens consistently in Chrome - but only when a page is loaded for the first time. When I visit the pages again after they have been loaded, they show the magnified image without a jump.

And yes, on the iPhone it starts jumping the moment you start scrolling.

And regarding different banner sizes - all banners already have different sizes and they all jump - some worse than others. That’s why I asked my initial question - if there was a size recommendation for banners with the parallax effect turned on. But it looks like there is something in this stack that some browsers don’t interpret correctly when “parallax” is enabled.

Thank you so much for looking into this!

— Markus

Hi - have you any other Parallax stacks to test? Did it start with RapidWeaver 8? I will check as well but later on when I am back to my Mac …

It did not start with RapidWeaver 8. And I may have another parallax stack for testing.

I just did a quick test with “Parallax” by Joe Workman, replacing Banner Image while using the same file as before for the background image. - Nothing jumps when the page loads. It’s fine in both browsers.

The problem seems to be with the Banner Image stack.

1 Like

The Parallax effect is applied after the image is loaded. If you have a slower connection or a large image I could imagine you might see the transition. I’ll give it a deeper look, but so far in my tests yesterday I did not see a “jump” on your site when loading the page. If you want to send me a ZIP file containing your project file and a folder with your images I will take a look.

Thanks for looking into this. I have a very fast Internet connection - over 300 Mbps down and a super fast computer (iMac Pro). And this is what it looks like when I check those pages on Chrome: Banner Image Jump

Very strange that you’re not seeing the jump. I’ll send you the project with the image files.


Getting this at the URL you sent:

As for the jump – yeah, I’ve not seen it yet. But I haven’t looked at it today at all. I’ve been busy with other stuff and was just going to wait for your files before I took any further look at it.

I just changed the settings of that video. It should work now. Image Banner Jump

What’s the best way of sending you the file?

Dropbox link via a DM on the forum or an email. Up to you.

Got your project file. I will take a look at this after lunch.

I had a few moments while waiting on a reply to some emails and had a chance to look at this. In RapidWeaver preview mode I do now see the image getting sized up to cover the parallax overflow container. This “jump” is because the stack waits for the page to fully load before applying the parallax effect instead of just applying it as soon as the javascript will allow.

I can’t remember now why I opted for loading the parallax javascript after the page completely loaded, but I suspect there was a conflict with other content or stacks and it needed to load last.

I think it had something to do with the reveal stack. Still would be great if you can have a second look to see if it can be loaded earlier again…

I’ll have a look. I have plans for a small release with some bug updates, and will switch it to loading sooner, but if problems crop up, of the two things (1) being a quick flash as the image sizes up and (2) an incompatibility with other stacks, I will lean toward the quick flash as it sizes up.


Thanks, as usual. Perhaps you can achieve both :slight_smile:

Thank you so much for looking into this. Hopefully you’re able to get rid of the flash without any incompatibilities. Image Banner is a really great stack.

1 Like

Thank you so much for fixing this! So far, everything seems to be working great. No conflicts on my website.

1 Like