Skip to content

Instantly share code, notes, and snippets.

@ellenbo
Forked from srikat/parallax.js
Last active November 11, 2017 00:09
Show Gist options
  • Save ellenbo/999661db167f2c1fb423d9fbcb7fa885 to your computer and use it in GitHub Desktop.
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/
// Add widget areas
add_action( 'genesis_entry_content', 'function_name' );
function function_name() {
echo '<div class="CLASS_NAME parallax-section"></div>';
}
//* 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' );
}
}
jQuery(function( $ ){
$(window).scroll(function(){
scrollTop = $(window).scrollTo(0,0);
// Third home page section
$(".parallax-section.CLASS_NAME").css("backgroundPosition", "0px " + -(scrolltop/6) + "px");
});
});
/* 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