ellenbo
11/10/2017 - 11:46 PM

Applying Parallax effect from Parallax Pro in any Genesis theme. http://sridharkatakam.com/apply-parallax-effect-parallax-pro-genesis-theme/

Applying Parallax effect from Parallax Pro in any Genesis theme. http://sridharkatakam.com/apply-parallax-effect-parallax-pro-genesis-theme/

/* Parallax effect
--------------------------------------------- */

.parallax-section.CLASS_NAME {
		background: url(./images/BG_IMAGE_NAME.jpg) no-repeat center center fixed;
		-webkit-background-size: cover;
		-moz-background-size:    cover;
		background-size:         cover;
		height: 500px; /*height of parallax container*/
		
		/*If the image is square enough and you want to see the full width without it resizing to cover, use this*/
		/* -webkit-background-size: 100% auto;
		-moz-background-size:    100% auto;
		background-size:         100% auto; */

		
	}
jQuery(function( $ ){
    
        $(window).scroll(function(){
    
            scrollTop = $(window).scrollTo(0,0);
    
            // Third home page section
            $(".parallax-section.CLASS_NAME").css("backgroundPosition", "0px " + -(scrolltop/6) + "px");
    
        });
    
    });
//* Enqueue parallax script
add_action( 'wp_enqueue_scripts', 'enqueue_parallax_script' );
function enqueue_parallax_script() {

	if ( ! wp_is_mobile() ) {

		wp_enqueue_script( 'parallax-script', get_bloginfo( 'stylesheet_directory' ) . '/js/parallax.js', array( 'jquery' ), '1.0.0' );

	}

}
// Add widget areas

add_action( 'genesis_entry_content', 'function_name' );
function function_name() {
  echo '<div class="CLASS_NAME parallax-section"></div>';
}