This tutorial provides the steps to add a parallax effect on the widgetized front page in any child theme based on the Genesis framework.
This tutorial is for parallax effect for background image only. Follow the advance tutorial for more customizations.
STEP 1
Create a widgetized front page.
- Full Width Widgetized Front Page in Genesis Sample
- Flexible Widgetized Front page in Genesis Sample
- Full Width Widgetized Front Page in Genesis
STEP 2
a) Create a file parallax.js and paste the following
/**
* This script adds the parallax effects genesis child theme.
*
* @package Parallax\JS
* @author StudioPress
* @license GPL-2.0+
*/
jQuery(function( $ ){
// Enable parallax and fade effects on homepage sections.
$(window).scroll(function(){
scrolltop = $(window).scrollTop()
scrollwindow = scrolltop + $(window).height();
$(".front-page-1").css("backgroundPosition", "50% " + -(scrolltop/6) + "px");
if ( $(".front-page-3").length ) {
sectionthreeoffset = $(".front-page-3").offset().top;
if( scrollwindow > sectionthreeoffset ) {
// Enable parallax effect.
backgroundscroll = scrollwindow - sectionthreeoffset;
$(".front-page-3").css("backgroundPosition", "50% " + -(backgroundscroll/6) + "px");
}
}
if ( $(".front-page-5").length ) {
sectionfiveoffset = $(".front-page-5").offset().top;
if( scrollwindow > sectionfiveoffset ) {
// Enable parallax effect.
backgroundscroll = scrollwindow - sectionfiveoffset;
$(".front-page-5").css("backgroundPosition", "50% " + -(backgroundscroll/6) + "px");
}
}
});
});
b) Enqueue this file using the following code in front-page.php (created in STEP 1) before get_footer(); OR genesis();
//* Enqueue Front Page CSS and JS
add_action( 'wp_enqueue_scripts', 'gk_parallax_scripts', 50 );
function gk_parallax_scripts() {
//* parallax.js
wp_enqueue_script( 'parallax-script', get_stylesheet_directory_uri() . '/js/parallax.js', array( 'jquery' ), '1.0.0', false );
}
STEP 3
Create Image Background section for front-page-1, front-page-3 and front-page-5 as we have targeted these section in the parallax.js file.
a) Follow one of the tutorials tagged with image-background.
b) Copy the image-background classes → image-background page-header bg-primary with-background-image
Combine it with the relative section i.e front-page-1 so it will look like this
genesis_widget_area(
'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-widget front-page-1 image-background page-header bg-primary with-background-image"><div class="wrap">',
'after' => '</div></div>',
)
);
c) As we have targeted the same classes, We will use the similar CSS for image background.
Copy the CSS from image background tutorial you are on and paste in style.css
Done!