[Resolved] How to make element with parallax foreground and background (diff scroll speed)

[Whelan]

Hi, I’ve built a simple page hero header element as per your tutorial here. It consists of a background image and some text in the “inside-page-hero” div.

This is the staging site: https://mikewhelan.net/ewc-staging/coaching/

I’m trying to make the inside-page-hero content scroll slower than the background image so that it stays on screen for longer. Unfortunately I’m no good at JS, so I can’t understand your code. Could you help please?

If you look at the 2nd example on this demo page: https://keithclark.co.uk/articles/pure-css-parallax-websites/demo3/, I’d like the background image to behave like the base layer and “div.inside-page-hero” should behave like the background layer, i.e. it should scroll slower.

(PS I’m using “Blocks Animation: CSS Animations for Gutenberg Blocks” plugin to animate the arrow icon below the page hero text)

[Elvin]

Hi there,

You can try adjusting the speed of the background.

Try this filter.

add_filter( 'generate_page_header_parallax_speed', 'tu_adjust_page_header_parallax' );
function tu_adjust_page_header_parallax() {
    return 2;
}

The default value is 2. You can change the value to a higher one or to your preference. 😀

[Whelan]

Thanks for the suggestion but it doesn’t solve my problem. I want the text that is displayed above the image to scroll slowly, so that it stays visible for longer, i.e. on this page: https://mikewhelan.net/ewc-staging/coaching/ I want the words “find your way” to scroll slowly. I tried adjusting the speed ranging from -5000 to 10000 and I don’t see any difference.

[David]

Hi there,

the parallax option in GP Header Elements only applies to the background image. what you require sounds like multi-layer parallax which it doesn’t support. I am afraid that would require custom development.

[Whelan]

OK. I suspected that might be the case. If I want to add my own js, I assume I need to ensure parallax.min.js is not loaded.

Can I just add this custom snippet: wp_dequeue_script( 'generate-sections-parallax');

[Whelan]

… sorry I left off part of the code snippet. I assume it should be:

add_action( 'wp_enqueue_scripts', 'tu_remove_menu_scripts', 50 );
function tu_remove_menu_scripts() {
    wp_dequeue_script( 'generate-sections-parallax');
}

[David]

Thats correct. Or by simply not enabling the option in the header element

[Whelan]

OK thanks. Issue closed

PS I just wanted to make sure after reading this post: https://generatepress.com/forums/topic/instructions-to-dequeue-some-unused-gp-js-related-to-menu-etc/#post-532013

[David]

Yeah thats an old topic relating to the Sections module that would load the parallax script by default. I believe that was patched. But needn’t worry as Header Elements only load the script if the option was enabled in the element.

[Author]

Posts