• Skip to primary navigation
  • Skip to content
  • Skip to primary sidebar
  • Skip to user navigation

PopWP

WordPress and Genesis Tutorials

  • Get Started
  • About
  • Archive
  • Services
  • Membership
  • My Account

Parallax Effect in Genesis

Last Updated on March 9, 2019 Favorited: 0 times

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!

Related Posts

  • Filterable Portfolio in Genesis
  • Widgetized Front page having Parallax Effect section float over and fadeUp when scrolled in Genesis
  • Advanced Post Page Blog layout in Grid using CSS Grid in Genesis
  • Parallax effect having front-page-2 float over front-page-1 when scrolled in Genesis

Categories: Free Content, Genesis Tutorials Tags: Parallax, parallax background, Parallax Effect, update required

Reader Interactions

Primary Sidebar

Search

WPEngine WordPress Hosting, Perfected.

Hosting You are looking for?.
Perfect solution for small business to global enterprise.

Learn more

StudioPress Genesis Theme Framework

The No.1 Theme Provider.
Creative, SEO rich Theme for all niche projects.

Learn more

Categories

  • Free Content
  • Genesis Tutorials
  • Premium Content
  • Snippets
  • What's New?
  • WordPress Tutorials

Tag Cloud

Archive Background Section blog canvas menu center logo columns conditional tags CSS CSS Grid custom Customizer custom post type Custom Post Types custom template Custom Widget effect eNews Extended Featured Image front-page Genesis Genesis Sample header right hero section Image Background js layout left menu Logo menu Navigation Menu newsletter post page related posts responsive menu search search widget Shrinking Logo site header slide in-out Stylesheet Template Utility Bar Video Background widgets WordPress

Built with Genesis Framework + WordPress by Aryan Raj

  • Contact
  • FAQ
  • Disclaimer
  • Privacy Policy
  • Copyright Policy
  • Terms of Service