Docs

[Mike Harrison]

Hi,

I’ve been having this problem since the first time I bought your theme. I’ve been using it a lot and I love it and would like to get to the bottom of why the parallax scrolling is not working on my laptop. I’ve been back and forth in another thread but it’s been closed to inactivity.

Can someone at Themeco please tell me WHICH FILE contains the code that chooses whether or not parallax scrolling will be in effect? I know there are some conditions such as touch-screen enabled device which disables it and would like to come up with a workaround (I’m aware of performance issues and will cross that bridge when I get to it).

Thanks in advance,

Mike

[Mike Harrison]

Ok. So if anyone is wondering how to fix this for their sites, or enable parallax scrolling on mobile it is possible…and within a child theme!

Here’s how:

First create a javascript file – I called it fix-parallax.js and stick it in your child theme’s folder.

You need to enqueue the script with the dependency of the cornerstone body scripts so you can call that like so:

wp_enqueue_script(
	'fix-parallax',
	get_stylesheet_directory_uri() . '/js/fix-parallax.js',
	[ 'cornerstone-site-body' ],
	false,
	true
);

This will include it after the cornerstone scripts on every page. For the javascript, I modified the script that comes with Cornerstone a bit which looks like this:

(function($){

    xData.api.map('section', newSectionSetup);

    function newSectionSetup( params ) {

        var $this = $(this);

        var backgroundSetup = function() {

            if ( $this.hasClass('parallax') ) {
                if ( $this.hasClass('bg-image')   ) speed = 0.1;
                if ( $this.hasClass('bg-pattern') ) speed = 0.3;
                if ( speed ) $this.parallaxContentBand('50%', speed);

            }

        };

        if ( document.readyState === 'complete' ) {
            backgroundSetup();
        } else {
            jQuery(window).load( backgroundSetup );
        }

    }

})(jQuery);

That is the entire contents of the file and will now enable parallax scrolling effect on any device (I removed the touch enabled device check in the javascript).

Anyone at Themeco willing to chime in on if this is a good/bad solution? Works pretty well on my Galaxy Note 2 which is pretty outdated so I would guess it’s not that huge of a performance bottleneck.

[Rad]

Hi there,

That’s a good one, and thanks for sharing. That’s very useful 🙂

Thanks!

[ugiorgi]

I am not sure I understand how to add the first part of the script. Where I should add it?

[Christopher]

Hi there,

It should be added in child theme’s functions.php file. Please check this link for more information https://developer.wordpress.org/reference/functions/wp_enqueue_script/

Hope it helps.

[Author]

Posts