Using existing Parallax script to create Parallax areas outside of content area

Hi Greg,

Many thanks for the help. I think I have that working now. It was a little more complex, as I’m also calling in the extra parallax images from ACF image fields (Advanced Custom Fields plugin). Once I had things working with hardcoded image data, I figured out a way to populate the JSON array from the ACF info (For ACF users, you need to set your image type to Array, so you can grab the sizes). For anyone else who may want to do this, I’ve got to this point, which is working for me. I’ve stripped this all back for clarity.

<?php
	$bgimage = get_field('page_background');
	$url = $bgimage['url'];
	$width = $bgimage['width'];
	$height = $bgimage['height'];
?>
<div data-siteorigin-parallax='{"backgroundUrl":"<?php echo $url; ?>","backgroundSize":[<?php echo $width; ?>,<?php echo $height; ?>],"backgroundSizing":"scaled","limitMotion":"auto"}'></div>
</div>

Also, it didn’t want to call the parallax script by just enqueuing it in functions.php. I needed to actually register it as well. It only worked by enqueuing only, if I was using actual PageBuilder parallax elsewhere on the page. If you can think of any way for me to simplify this stage, that would be great! At the moment, I’m reliant on the paths to the .js script staying the same.

in functions.php:

<?php
	if( !is_admin()){
	    function load_scripts() {
	        wp_register_script(
				'siteorigin-parallax',
				get_site_url() . '/wp-content/plugins/siteorigin-panels/js/siteorigin-parallax.min.js',
				array('jquery'),
				null,
				true
			);  		    
		    wp_enqueue_script('siteorigin-parallax');
	    add_action('init', 'load_scripts');	
	}
?>

Thanks again for the help!

Mat