Adding Parallax to WordPress with Genesis

pre { margin-bottom: 18px !important;} p { line-height: 1.8 !important; } h2 { margin: 32px 0 28px 0 !important; } Parallax describes the effect where objects up close appear to move faster than objects far away. You will see many websites that make the images appear to move slower then the scrolling text. There are a few ways to accomplish this. The simplest and most compatible way is to use just css and to basically fix the background image to the window. This gives an impression of parallax. This article by Nick explains this procedure the best. Simple Parallax Scrolling Effect. The same author has a tutorial on a more complex parallax method using both css and JavaScript. Based on what he said, the complex method would be better used with images with a repeatable pattern. Also, after reading the comments, there are compatibility issues. Stellar.js might be a robust library to use instead, but as of this writing, it hasn't been updated in 2 years or more. We're going to stick with the simple css method and see how to incorporate Nick's method into the Genesis markup.

Basic Parallax

If we just use the very minimal css for this, we could create a class called parallax and store it in our style.css file.


.parallax {
	background-size: cover;
	background-attachment: fixed;
}

NOTE: As shown in Nick's post one might also want to add 'background-position: 50% 50%;' as this will center the image in the browser window. Now we just add this class to the container we want it and add the css for a background-image. Let's say we have an image called lava.jpg for a background image in our theme's images directory. We'll want to give the container a width and height if we don't have any content in it.


.lava-box {
  background-image: url('./images/lava.jpg');
  height: 100px;
    width: 100%;
}

In our post, let's create the div:

That works but how often will we have the image in our theme folder. Most likely the image will be in our Media library. One would have to get the full url for the image by accessing the media library and then add this in our css. It would be better to change the url to a relative url. If you don't and you change your domain or move off of a staging server, this could become a broken link. For example, an image is uploaded to the library and it's full url becomes //jhtechservices.com/agenesischild/wp-content/uploads/2015/12/download.jpg. We would change this to a relative url. It's relative to where the css file is stored. If this is the theme's style.css file, the relative url to this image is '../../uploads/2015/12/download.jpg' Another way would be to just add the style to the div directly in the post edit window (making sure you are editing in 'Text' view). We don't want to change this to a relative url since most WordPress moving/restoring procedures will automatically change a full url that is in a post. Also, any url in a style written in the post is relative to the post url so this makes it difficult and if the permalink structure is changed, the relative urls in a post may not be valid.

NOTE: you'll want to give the div height and width and/or content to see the background image. Another NOTE: don't use the shorthand 'background:' css on this div as it will overwrite the background declarations of our parallax class.

Adding Parallax to Genesis basic structures

So this is good for adding parallax to post images, but how often will one do that. Parallax images are meant more for decoration or ambiance. They would mostly be used as hero/banner images or as a background to the page. Both of these usually span the entire width of the page. To span the width of the page we have to put our parallax class on an HTML container that spans the window. On a basic Genesis page, which containers normally span the entire window? Here's a basic overview of common Genesis HTML markup in the container:



    
    
     Your posts are in here

To span the width of the page, we will have use an html container outside of the div.site-inner container. We could put a container on the same level as the nav, header, and footer containers to make a parallax banner image or hero. To add parallax to your site's background, we would add the parallax class to the site-container div.

Adding a parallax hero image to the home page

Let's add a banner image below our main menu on our home page. In other words, between the

and the

. To do this we'll hook into the genesis hook, genesis_after_header and print out our banner

if it is trying to show the home page. We'll add the following code to our theme's functions.php file.


add_action('genesis_after_header','agct_parallax_home_banner');

function agct_parallax_home_banner() {
 if (is_home() || is_front_page()) {
  echo '';
 }
}

Now we need to style the hero class in our styles.css:



.hero {
	height: 300px;
	width: 100%;
	background-image: url("./images/download.jpg");
}

Adding different parallax hero image to any page

It would be nice to have a template we could assign to a page to give it a hero image. It would be nicer still to be able to have different custom images that we don't have to code in the style.css. How about having it use the feature image of the page? To start we need to create a template php file in our theme folder. Let's call it 'page_hero.php' and add the following to it.


/**
 * Template Name: Parallax Hero Banner
 */

add_action('genesis_after_header','agct_parallax_banner');

function agct_parallax_banner() {
	$thumbnail = wp_get_attachment_image_src( get_post_thumbnail_id($POST->ID,'full'));

	if ($thumbnail) {
		echo '';
	}
}

genesis();

Now when we go to create a new page, in the edit screen we can choose the "Parallax Hero Banner" template and assign it a feature image. The 'hero' class is added to add more styles. You will need it to have width and height set for this div to show. What about posts? You'll want checkout the WordPress docs on this subject. We would suggest creating a category template file so that all posts in a certain category would have a hero banner. For example, creating a file called 'category-banner.php' and placing the above code would make all posts in the banner category have a hero banner. Well, we hope this helps! Please leave a comment if it does.

← Back to Blog