[Resolved] Parallax in Page Header & Section

[Silvère]

Hi,

I see a difference between Page Header and Section with the parallax option. The effect is not going in the same direction.

I try to simulate the Header Page parallax effect with :

add_filter( 'generate_sections_parallax_speed','generate_custom_parallax_speed' );
function generate_custom_parallax_speed()
{
     return -2;
}

Speed and direction are ok but the background image is repeated on the top when I scroll the page bottom.

Is there a bug on my site or is it the normal way of the parallax effect between Header and Section ?

I have latest versions off theme and plugin (1.3.38 and 1.2.89)

Thanks you Tom for your great work

[Tom]

Hi there,

They both use the same script.

One issue with parallax is if the section is near the bottom of the page, it starts moving as you begin scrolling down. When you reach the section, it has already been scrolling up. If the image isn’t very tall, you can get a repeated image.

I’m looking for a solution, but for now you’ll want to keep parallax sections near the top, or use taller images.

[Silvère]

Section and the Header are exactly at the same position, on the top, just below the menu.
The site is not yet online. I’ll give you the URL in a few weeks. The parallax effect is not essential.

[Tom]

Sounds good – seeing it will definitely help me figure out what’s going on 🙂

[Silvère]

Thanks you a lot for your support 😀

[Tom]

No problem 🙂

[Silvère]

Hello Tom,

I have put the site online. I deleted the optimizations you gave us at https://generatepress.com/fastest-wordpress-theme/ to facilitate your visit (in addition it generates some issues on this site but is not the subject 🙂 )

There are :
– Header http://www.lesmatoirsdos.fr/
– Section http://www.lesmatoirsdos.fr/votre-projet-sur-mesure or http://www.lesmatoirsdos.fr/contact

As you can see, the effect isn’t the same in Header and Sections.

[Tom]

Hi there,

I’m not too sure what you mean?

They’re using the exact same parallax javascript, so they should be the same. I’m not seeing any difference besides the height of each area.

[Silvère]

I have resolve the problem.
For the section parallax you need to add a css line :

.generate-sections-container {
    background-attachment: fixed;
}

You not see that the section background not move like header one ?
Sorry if I do not make me understand. I’m not very comfortable with the English language :-/.

Edit : now I have add this CSS on the web site. To see the issue it will do tests on your

[Tom]

Ah I see – I actually prefer it without the background-attachment: fixed, but I’m glad you found the solution – it looks great! 🙂

[Author]

Posts