parallax

Demo

Universal Parallax GIT

Step 1

Upload universal-parallax.min.js to child theme’s js directory.

Step 2

Create a file named say, parallax-init.js in the same location having:

new universalParallax().init();

Step 3

Install and activate Genesis JS / No JS plugin.

This is to prevent the flash of nav menu items which affects the parallax effect.

Step 4

Edit child theme’s functions.php.

a) Inside genesis_sample_enqueue_scripts_styles() add the following at the end:

if ( is_front_page() ) {
    wp_enqueue_script(
        'universal-parallax',
        get_stylesheet_directory_uri() . '/js/universal-parallax.min.js',
        array(),
        1.0.0,
        true
    );

    wp_enqueue_script(
        'universal-parallax-init',
        get_stylesheet_directory_uri() . '/js/parallax-init.js',
        array( 'universal-parallax' ),
        '1.0.0',
        true
    );
}

b) At the end of the file, add

// Register `home-hero` widget area.
genesis_register_widget_area(
    array(
        'id'          => 'home-hero',
        'name'        => __( 'Home Hero', 'genesis-sample' ),
        'description' => __( 'This is the home hero section.', 'genesis-sample' ),
    )
);

add_action( 'genesis_after_header', 'sk_home_hero' );
/**
 * Display `home-hero` widget area and empty div.parallax below site header.
 */
function sk_home_hero() {

    // if this is not the homepage, abort.
    if ( ! is_front_page() ) {
        return;
    }

    genesis_widget_area( 'home-hero', array(
        'before' => '<div class="home-hero widget-area"><div class="wrap">',
        'after'  => '</div><div class="parallax"></div></div>',
    ) );

}

Step 5

Upload your desired parallax background image as hero.jpg to child theme’s images directory.

Step 6

Add the following before the media queries in child theme’s style.css:

.js nav {
    display: none;
}

@media only screen and (min-width: 960px) {

    .js nav {
        display: block;
    }
}

.home-hero {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;

    -ms-flex-pack: center;
    -ms-flex-align: center;
    position: relative;
    padding: 200px 0;

    -webkit-box-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    align-items: center;
}

@media only screen and (min-width: 960px) {

    .home-hero {
        margin-top: 70px;
    }
}

.home-hero .wrap {
    z-index: 2;
    max-width: 800px;
    padding: 30px;
    border-radius: 3px;
    background-color: rgba(255, 255, 255, 0.9);
    font-size: 20px;
}

.home-hero .widget {
    margin-bottom: 0;
}

.home-hero .widget-title {
    font-size: 32px;
    text-align: center;
}

.parallax__container {
    overflow: hidden;
    clip: rect(0, auto, auto, 0);
    position: absolute;
    z-index: -100;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.parallax {
    position: fixed;
    top: 0;
    width: 100%;
    background: url(images/hero.jpg) no-repeat 50% scroll / cover;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

@media only screen and (max-width: 823px) {

    .home-hero {
        padding: 50px 0;
    }

    .home-hero .wrap {
        font-size: 18px;
    }
}

If you would like to overlay a blueish gradient on top of the image, make the following changes in the above CSS:

a) For .home-hero .wrap, replace background-color: rgba(255, 255, 255, 0.9); with color: #fff;.

b) Add

.home-hero:before {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: #006cff;
    background: radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%);
    background: -webkit-radial-gradient(left top, circle cover, rgba(100, 66, 255, 0.9) 15%, rgba(0, 108, 255, 0.9) 50%, rgba(12, 180, 206, 0.9) 85%);
    content: "";
    pointer-events: none;
}