Archived topic
How to make element with parallax foreground and background (diff scroll speed)
8 replies · Started by Whelan on July 25, 2021
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)
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. :D
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.
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.
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');
... 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');
}Thats correct. Or by simply not enabling the option in the header element
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
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.
