Pure CSS Parallax Page Header in Genesis

Add a parallax image behind a page entry header in Genesis - pure css solution. (You'll need to style your image to be tall enough to match the webpage header, so it is behind the main page header on scroll)

<?php
/**
* Add a parallax image behind a page entry header in genesis.
*
* @author Joshua David Nelson, [email protected]joshuadnelson.com
*/
// Parallax Image
add_action( 'genesis_header', 'parallax_image', 15 );
/**
* Parallax Image
*
* @since 1.0.0
*/
function parallax_image() {
global $post;
if( isset( $post->ID ) && is_page() ) {
$thumb = has_post_thumbnail( $post->ID );
if( $thumb ) {
$thumbnail_src = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( 1500, 300 ) );
if( $thumbnail_src )
echo '<div class="parallax_image" style="background-image: url(' . $thumbnail_src . ');"></div>';
}
}
}
// Featured image behind header
add_action( 'genesis_meta', 'jdn_featured_image_header' );
/**
* Display the featured image behind the header.
*
* @since 1.0.0
*/
function jdn_featured_image_header() {
if( is_page() ) {
$thumb = has_post_thumbnail( get_the_ID() );
if( $thumb ) {
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
add_action( 'genesis_after_header', 'genesis_entry_header_markup_open', 15 );
add_action( 'genesis_after_header', 'genesis_do_post_title', 20 );
add_action( 'genesis_after_header', 'genesis_entry_header_markup_close', 25 );
}
}
}
view raw functions.php hosted with ❤ by GitHub
/* Styles needed for parallax effect */
.site-header {
.wrap {
position: relative;
}
}
.parallax_image {
position: fixed;
top: 0;
left: 0;
background-repeat: no-repeat;
min-width: 100%;
width: 100%;
@include background-size( cover );
background-position: center top;
height: 500px;
z-index: -1;
}
view raw style.scss hosted with ❤ by GitHub

Source: https://gist.github.com/joshuadavidnelson/7c031ad6247f60974db7

Tags: , ,