[Resolved] Parallax issue with update 1.4.3

[Mark]

Hey,

i use the parallax effect on section backgrounds. Till i updated, everything worked fine, but since, the parallax effect doesn’t “start” till the section hits the top of the window.

You can see an example here: parallax example

I tried deactivating all other plugins, but that doesn’t help.

Could use some help here. 🙂

GP Premium 1.4.3

[David]

This is not a bug its just Parallax simply scrolls the background at a slower rate to the screen.
You dont have enough screen above it to work correctly.
Parallax at the top of the page really requires a bigger image – full screen is best.

If you were to apply it to the section further down the page you would see the effect.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Tom]

This is an intended feature in 1.4.

Before the update, backgrounds would begin moving immediately, even if the section was at the bottom of the page. This resulted in the image repeating in some cases, as by the time you reached the section, the entire image had already scrolled.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

Thanks for the fast reply.

Yeah, I read about the changes to the parallax scrolling in the related threads. Great work btw. 🙂

In the given example, both of the sections with background pictures have parallax scrolling enabled. If u watch carefully, you will see, that the parallax effect will start as soon as the section starts to “vanish” at the top of the browser window.

I hope you understand what i’m trying to describe 🙂

[Tom]

Hmm, it starts to move as soon as the image hits the top of my screen: https://www.screencast.com/t/7cWowvaA6YB

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

Yes, thats exactly what i mean. I edited the sample page to make it more obvious. In my understanding, the parallax effect you implemented (background scrolling at a different speed) should start as soon as the picture is visible. >like here<
At least, thats how it worked on my page prior to the update and the way it workes in the sample video on the GP page.

But maybe thats just the way it should work now. 🙂

[Tom]

As of 1.4, the parallax script will only kick in once the image hits the top of the screen – this is the only way to prevent the bug I mentioned earlier.

Unfortunately it’s much harder/not great for performance to constantly check if something is inside the viewport. It is possible to switch back to the old script if you’d rather use that?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Mark]

Ah ok, good to know and thanks for the info!

If there is an easy way to use the old script, i would like to know how i could use it. If not, no problem.

I just thought there was something wrong. Thank you for the clarification. 🙂

[Tom]

Give this a try:

add_action( 'wp_enqueue_script', 'tu_switch_page_header_parallax', 15 );
function tu_switch_page_header_parallax() {
    wp_dequeue_script( 'generate-page-header-parallax' );

    wp_add_inline_script( "jquery", 
		"function generateHeaderParallax() {
			// Disable on mobile
			var mobile = jQuery( '.menu-toggle' );
			if ( mobile.is( ':visible' ) )
				return;

			// Only run the function if the setting exists
			if ( ! jQuery('.generate-page-header.parallax-enabled')[0] )
				return;
			
			// Page Header element
			if ( jQuery('.page-header-contained')[0] ) {
				var $this = jQuery( '.generate-page-header.parallax-enabled .inside-content-header' );
			} else {
				var $this = jQuery( '.generate-page-header.parallax-enabled' );
			}
				
			var x = jQuery(this).scrollTop();
			var speed = jQuery('.generate-page-header.parallax-enabled').data('parallax-speed');
			return $this.css('background-position', 'center ' + parseInt(-x / speed) + 'px');	

		}

		jQuery(document).ready(function($) {
			if ( jQuery('.generate-page-header.parallax-enabled')[0] ) {
				// Initiate parallax effect on scroll for our page header
				$(document).scroll(function() {			
					generateHeaderParallax();
				});
			}

		});"
	);
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts