php 在任何创世纪主题中应用Parallax Pro的视差效果。 http://sridharkatakam.com/apply-parallax-effect-parallax-pro-genes

Posted 2021-05-05

/* 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>';
}