Docs

[yhshin1020]

Hey,

I need to set up JS files from http://johnpolacek.github.io/scrollorama/.

The zip file comes with a JS file called jquery.scrollorama.

I heard wp_enqueue_script() was the correct way of adding this to my site.

Based on my limited understanding, I was thinking I could copy the Javascript file into the child theme’s folder: x-child/js/

and then add following PHP code into the functions.php file to locate and load the file in the child theme’s folder:

function load_custom_js() {
	wp_enqueue_script( 'custom-js', get_template_directory_uri() . '/jquery.scrollorama.js' );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

I’m afraid I’m doing this wrongly. Could you validate if this will work?

Thanks.

[yhshin1020]

This reply has been marked as private.

[Thai]

Hi There,

Please try with this code instead:

function load_custom_js() {
	wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/jquery.scrollorama.js' );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

Hope it helps 🙂

[yhshin1020]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for the updates! Since the scrollorama.js is been properly enqueued with the code you added in your child theme’s functions.php file, you can insert the other JS code in the page that needs it. So for example, you are trying to add the effect on the homepage, simply edit the homepage in Cornerstone, go to the settings tab, Settings > Custom JS and insert the js code.

Hope this make sense.

[yhshin1020]

This reply has been marked as private.

[Thai]

Hi There,

Please update the previous code a bit:

function load_custom_js() {
	wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/jquery.scrollorama.js', array('jquery') );
}
add_action( 'wp_enqueue_scripts', 'load_custom_js' );

And the example code should be like this:

(function($){
	$(document).ready(function(){
	   $('.curtains').curtain();
	   
		var scrollorama = $.scrollorama({
			blocks:'.curtains'
		});
	    
	    scrollorama.animate('#intro h1',{
	    	duration:200, property:'left', end:-860
	    });
	    
	});
})(jQuery);

Hope it helps 🙂

[Author]

Posts