Docs

[Magik Web]

Hello,
See attached animated gif: https://www.magikweb.ca/download/hotlink/animation-loading-parallax.gif. You will notice that the parallax image is not in the right position when loading the page.

From what I gathered, the parallax is managed through JavaScript and it’s triggered when scrolling the page (and once when the page is loaded).

Is there a way to avoid that clippy/jumpy behaviour with CSS? Or to precalculate its position somehow with PHP?

We’ve started removing them when they’re above-the-fold, but there has to be a cleaner way.

PS: This may be related to CornerStone, I wasn’t sure.

[Rupok]

Hi there,

Your image is long but the section is not long enough rather wider. So it’s not positioning as expected.

Thanks!

[Magik Web]

Hello Rupok,
You can see that parallax on this website: https://www.vitreriemorin.ca/
The image is 1920px wide while the section is about 1903px (1920px minus scrollbar).

What do you mean by the section not being long enough? Do you mean not high enough?

[Rupok]

Hi there,

Yes I meant the height. I have checked your site earlier by grabbing the URL from gif. You should either change the image to a wider image or increase the height.

Thanks!

[Magik Web]

I don’t understand how that would fix the jumpy issue, but here goes.
I made the parallax much much bigger/higher: https://www.vitreriemorin.ca/
It still clips on the top of the website before going down to its right position.

[Rad]

Hi there,

Javascript only run when it’s finished loading, hence, the calculation of background position is kind of delayed compared to CSS. How about adding default CSS values, please add this CSS to Admin > Appearance > Customizer > Custom > CSS

 .home #accueil {
   background-position: 50% 24px;
}

Thanks!

[Magik Web]

Perfect! How did you get 24px? Would it be the same anywhere?

[Lely]

Hi There,

We can use Chrome inspect element to check the position and adjust 24px accordingly. It can be different per section.

Hope this helps.

[Author]

Posts