-
-
Save ellenbo/999661db167f2c1fb423d9fbcb7fa885 to your computer and use it in GitHub Desktop.
Applying Parallax effect from Parallax Pro in any Genesis theme. http://sridharkatakam.com/apply-parallax-effect-parallax-pro-genesis-theme/
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Add widget areas | |
add_action( 'genesis_entry_content', 'function_name' ); | |
function function_name() { | |
echo '<div class="CLASS_NAME parallax-section"></div>'; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//* 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' ); | |
} | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
jQuery(function( $ ){ | |
$(window).scroll(function(){ | |
scrollTop = $(window).scrollTo(0,0); | |
// Third home page section | |
$(".parallax-section.CLASS_NAME").css("backgroundPosition", "0px " + -(scrolltop/6) + "px"); | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* 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; */ | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment