Parallax Scrolling for Front Page sections in Altitude Pro

Altitude Pro's demo site has fixed background images for Front Page sections 1, 3, 5 and 7.

This tutorial provides the steps to set up parallax scrolling (subtle movement of the background image with scrolling) for these sections using Parallax.js.

Step 1

Upload parallax.min.js to Altitude Pro's js directory.

Step 2

Comment out or delete the following code that sets the images from Customizer (or the fallback images from the images directory, if not set in Customizer) as background for the four sections from lib/output.php.

foreach( $opts as $opt ) {
    $settings[$opt]['image'] = preg_replace( '/^https?:/', '', get_option( $opt .'-altitude-image', sprintf( '%s/images/bg-%s.jpg', get_stylesheet_directory_uri(), $opt ) ) );
}

foreach ( $settings as $section => $value ) {

    $background = $value['image'] ? sprintf( 'background-image: url(%s);', $value['image'] ) : '';

    if ( is_front_page() ) {
        $css .= ( ! empty( $section ) && ! empty( $background ) ) ? sprintf( '.front-page-%s { %s }', $section, $background ) : '';
    }

}

Step 3

Edit front-page.php (fully modified front-page.php can be found here).

a) Load parallax.min.js from Step 1 before home.js.

Change

// Define front page scripts.
function altitude_enqueue_altitude_script() {
    wp_enqueue_script( 'altitude-script', get_stylesheet_directory_uri() . '/js/home.js', array( 'jquery' ), CHILD_THEME_VERSION, true );
}

to