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.
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.
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.