Stellar in Wordpress

Question

I'm having issues getting Stellar.js to work for me in Wordpress. I am trying to have certain elements of a page scroll faster or slower than the natural scroll speed of the page, to create a parallax effect.

Can someone help me fix what I'm doing wrong here?

In my childtheme folder, I have two files; js/stellar.min.js and js/parallax.js.

In functions.php I have the following to register and enqueue these:

add_action('wp_enqueue_scripts', 'add_scripts');
function add_scripts() {
    if ( is_page( 'home' ) ) {
        wp_enqueue_script('jquery');
        wp_register_script('stellar', get_template_directory_uri() . "/js/stellar.min.js", array('jquery'));
        wp_enqueue_script('stellar');
        wp_register_script('parallax', get_template_directory_uri() . "/js/parallax.js", array('jquery'));
        wp_enqueue_script('parallax');
    }
}

Then in parallax.js I have the following:

jQuery(function(){
    jQuery(window).stellar({
        horizontalScrolling: false,
        verticalScrolling: true,
        responsive: false,
        scrollProperty: 'transform',
        positionProperty: 'transform',
        parallaxElements: true
    });
});

Lastly, of course, on the elements to be parallax I have data-stellar-ratio="2".

Use `get_stylesheet_directory_uri` instead of `get_template_directory_uri`. The former will return the URL of your child theme while the later will return the URL of the parent theme. You didn't explain exactly what problem you're having so I'm not sure if that is the only issue. — Mathew Tinsley, Mar 27 '15 at 21:24
The problem I'm having is that nothing is happening. The elements with `data-stellar-ratio` aren't scrolling at any variable speed. — mdf427, Mar 27 '15 at 21:49
Is the script being enqueued? When you view the source for the page does it have the script with the correct src? — Mathew Tinsley, Mar 27 '15 at 23:40

Stellar in Wordpress

0 Answers0