[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
    Posts
  • #369332
    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
    #369393
    David
    Staff
    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.

    #369398
    Tom
    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.

    #369411
    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 🙂

    #369415
    Tom
    Lead Developer
    Lead Developer

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

    #369731
    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. 🙂

    #369927
    Tom
    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?

    #369932
    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. 🙂

    #370176
    Tom
    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 ( 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();
    				});
    			}
    
    		});"
    	);
    }
Viewing 9 posts - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.