-
-
Save timothyjensen/0875d00f22698cfd7b6152f9619c7770 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
//* Register widget areas | |
genesis_register_sidebar( array( | |
'id' => 'parallax-section-below-header', | |
'name' => __( 'Parallax Section Below Header', 'your-theme-slug' ), | |
'description' => __( 'This is the parallax section below header.', 'your-theme-slug' ), | |
) ); | |
genesis_register_sidebar( array( | |
'id' => 'parallax-section-above-footer', | |
'name' => __( 'Parallax Section Above Footer', 'your-theme-slug' ), | |
'description' => __( 'This is the parallax section above footer.', 'your-theme-slug' ), | |
) ); | |
//* Hooks parallax-section-below-header widget area after header | |
add_action( 'genesis_after_header', 'parallax_section_below_header' ); | |
function parallax_section_below_header() { | |
genesis_widget_area( 'parallax-section-below-header', array( | |
'before' => '<div class="below-header parallax-section widget-area"><div class="wrap">', | |
'after' => '</div></div>', | |
) ); | |
} | |
//* Hooks parallax-section-above-footer widget area above footer | |
add_action( 'genesis_before_footer', 'parallax_section_above_footer' ); | |
function parallax_section_above_footer() { | |
genesis_widget_area( 'parallax-section-above-footer', array( | |
'before' => '<div class="above-footer parallax-section widget-area"><div class="wrap">', | |
'after' => '</div></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
//* Enqueue Sorts Mill Goudy Google font | |
add_action( 'wp_enqueue_scripts', 'custom_google_fonts' ); | |
function custom_google_fonts() { | |
wp_enqueue_style( 'parallax-google-fonts', '//fonts.googleapis.com/css?family=Montserrat|Sorts+Mill+Goudy', array(), CHILD_THEME_VERSION ); | |
} |
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).scrollTop() | |
scrollwindow = scrolltop + $(window).height(); | |
// Section Below Header | |
$(".parallax-section.below-header").css("backgroundPosition", "0px " + -(scrolltop/6) + "px"); | |
// Section Above Footer | |
if( scrollwindow > $(".parallax-section.above-footer").offset().top ) { | |
backgroundscroll = scrollwindow - $(".parallax-section.above-footer").offset().top; | |
$(".parallax-section.above-footer").css("backgroundPosition", "0px " + -(backgroundscroll/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 { | |
background-attachment: fixed; | |
background-color: #fff; | |
background-position: 0px 0px; | |
background-repeat: no-repeat; | |
-webkit-background-size: cover; | |
-moz-background-size: cover; | |
background-size: cover; | |
text-align: center; | |
font-family: 'Sorts Mill Goudy',sans-serif; | |
color: #fff; | |
font-size: 28px; | |
padding: 190px 0 200px; | |
} | |
.parallax-section .widget-title { | |
font-size: 72px; | |
margin-bottom: 40px; | |
color: #fff; | |
} | |
.parallax-section.below-header { | |
background-image: url("images/bg-1.jpg"); | |
} | |
.parallax-section.above-footer { | |
background-image: url("images/bg-2.jpg"); | |
color: #000; | |
} | |
.parallax-section.above-footer .widget-title { | |
color: #000; | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment