Black Friday! Get up to 25% off GP Premium! Learn more ➝

[Resolved] Parallax issue with update 1.4.3

Home Forums Support [Resolved] Parallax issue with update 1.4.3

Home Forums Support Parallax issue with update 1.4.3

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
  • #369332


    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
    Customer Support

    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.

    Lead Developer
    Lead Developer

    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.


    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 πŸ™‚

    Lead Developer
    Lead Developer

    Hmm, it starts to move as soon as the image hits the top of my screen:


    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. πŸ™‚

    Lead Developer
    Lead Developer

    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?


    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. πŸ™‚

    Lead Developer
    Lead Developer

    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 ( ':visible' ) )
    			// Only run the function if the setting exists
    			if ( ! jQuery('.generate-page-header.parallax-enabled')[0] )
    			// 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() {			
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.