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: http://dreamartmusic.com/
The home page banner briefly jumps.
The other pages that have parallax turned off for the banner image don’t do that.
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 just enabled “parallax” on all banners of my website - http://dreamartmusic.com/ - 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.
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.
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.
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 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’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.
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.
