Skip to content

Instantly share code, notes, and snippets.

@timothyjensen
Forked from srikat/parallax.js
Created May 30, 2016 00:20
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save timothyjensen/0875d00f22698cfd7b6152f9619c7770 to your computer and use it in GitHub Desktop.
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/
//* 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>',
) );
}
//* 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' );
}
}
//* 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 );
}
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");
}
});
});
/* 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