How to Add an Awesome Parallax Banner for Your WordPress Site
This page may contain links from our sponsors. Here’s how we make money.
The parallax effect has been used in the movie industry for a long, long time. Also, cartoons make great use of this simple technique. The general idea is to have two overlapped items moving in different speed ratios, to create an illusion of depth.
Parallax scrolling effects can work great even for websites. We can see many uses out there, and today we’ll take it a little deeper and create a banner making use of this technique.
The main challenge here is to do something simple because we’re dealing with dynamic content so everything will change pretty often. Our effect will need, for example, to automatically detect heights, since the only fixed dimension will be the width.
Also, we’ll learn how to do that on the top of a WordPress theme, in our case the Twenty Eleven theme (default theme), but you can easily use the concepts and snippets here to apply on your own theme.
So, let’s rock!
Parallax Banner Demo
You can’t see the animation in the screenshot, but you can get the overall idea here.
Photo credits joeymc86
As you scroll down on the demo page, notice that the image of the tree scrolls at a different rate as compared to the page. When the demo page opens, the “All you need is love” text is in the middle of the image, and right at the top of the tree (see image above). As you scroll down, the text will still be in the middle of the image, but it will line up lower on the tree.
There are a lot of different ways that you can put this to use in your own work. We’ll go over the process of implementing the parallax effect and you can adapt it to suit your own needs.
So, What Exactly Are We Doing?
We’ll create a banner before your posts with a featured image that will scroll up faster than the window scroll, so it has a depth effect that will make our banner stands out.
Setting Up WordPress
If you don’t have WordPress installed in a development environment, it’s a good time to do so. After installing it, Twenty Eleven will be enabled by default, but to give the exact same look as we have in our demo you’ll need to go to “Wp-admin > Appearance > Theme Options” and select the one-column layout, without a sidebar.
Also, under “Wp-admin > Appearance > Header” you can disable the default banners since we’ll use our own awesome banner.
Enqueueing Scripts and Styles, Adding New Image Size
We’ll make our changes directly on the functions.php file. If you want, you can create a plugin for this effect also but to keep this simple we’ll do it directly on the theme.
Let’s use the wp_enqueue_script() and wp_enqueue_style() to add our custom files. You’ll need to create vandelay.parallax.js and vandelay.parallax.css files under the js folder. Then you’ll add this to your functions.php:
function call_parallax_scripts() {
//script
wp_enqueue_script(
'vandelayParallax',
get_template_directory_uri().'/js/vandelay.parallax.js',
array('jquery')
);
//style
wp_enqueue_style(
'vandelayParallaxCSS',
get_template_directory_uri().'/js/vandelay.parallax.css'
);
}
add_action('wp_enqueue_scripts', 'call_parallax_scripts');
We’re using the get_template_directory_uri() function to prevent hardcoded paths. Also, if you are using plugins you’ll need to use the plugins_url() function.
And notice that we’re adding them as actions so WordPress automatically attaches them in the right place in our HTML. That is especially important because of our dependency on jQuery for the script.
Since our banner will have a custom image size, let’s add it this way:
//let's add a new image size now add_image_size( 'parallax', 690, 600 ); //parallax banner
If you already have created posts you’ll need to use a thumbnail regenerator plugin to create new featured images on this new size. If you don’t, just create a new dummy post with an image bigger than 690×400.
Adding the Parallax Container
Now we’ll create a function to add the proper markup to our banner. It’s a simple function by which will just get a post and create a div containing the post’s thumbnail and title.
function add_parallax($post) {
$parallax = "<div id='parallax-banner'>";
$parallax .= get_the_post_thumbnail( $post, 'parallax' );
$parallax .= "<span class='title'>".get_the_title($post)."</span>";
$parallax .= "</div>";
echo $parallax;
}
That snippet will just create the function, we still need to call it. The question is, where?
Well, before calling the function, let’s create a new category called “Featured” so when we create our posts we’ll just need to assign them to this category and they’ll show on the homepage. After creating this new category, click on the edit link for it.
Take a look at the URL bar right now. You’ll have something like this: localhost/wp-admin/….tag_ID=15. So, the main part here is the ID for our brand new category, which is 15 in my case, and probably another number in your case.
We’ll use this number to get the latest post of this category and apply the add_parallax() function to it. In our case (Twenty Eleven) you’ll need to open your index.php file, and add this after line 22:
<?php
//we’ll add it only at homepage
if( is_front_page() ) {
$args = array( 'numberposts' => 1, 'category' => 15 );
$parallax = get_posts( $args );
add_parallax($parallax[0]->ID);
}
?>
This is a custom WordPress loop that’ll get only the first element from category 15. That code will only be applied for the homepage since we used the is_front_page() conditional tag. If you want to show that for every page or post just remove that condition.
Oh, and that strange $parallax[0]->ID var is there just because of the way that WordPress returns get_posts() elements. We don’t need to use the setup_postdata function, and actually, it can mess up your normal posts loop depending on where you add it.
CSS Styling
Now we’ve got our main box in place, let’s style it. Open your vandelay.parallax.css and add these lines:
#parallax-banner {
position: relative;
width: 690px;
margin-left: -52px;
overflow: hidden;
}
#parallax-banner img {
position: absolute;
}
There’s nothing really impressive here, but see how the #parallax-banner now depends on a height declaration, since we’ll add only absolutely positioned elements. Also, the top position of the img will do the parallax trick, as you may imagine.
Now we’ll style the title:
#parallax-banner .title {
position: absolute;
padding: 5px 0;
top: 0;
left: 0;
width: 100%;
text-align: center;
text-transform: uppercase;
font-weight: bold;
background-color: transparent;
background-color: rgba(255, 255, 255, 0.8);
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff); /* Math.floor(0.8 * 255).toString(16); */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ccffffff,endColorstr=#ccffffff)";
-moz-box-shadow: 0 0 4px #000;
-webkit-box-shadow: 0 0 4px #000;
box-shadow: 0 0 4px #000;
}
First cool thing to point out here is the RGBA alternative for IE. That will give a better look to our effect, and it’s good that at least this can be done quite well on IE.
Another important point is that now the .title will be always on the top of the container, but we actually want it to be positioned on the center of that div. This could be done with line heights, but since we’re dealing with dynamic content we’d better use jQuery to position it, so it’ll be more reliable in the case of having two lines of title, for instance.
Finally, the jQuery Wizardry
Now let’s play with the vandelay.parallax.js file. We’ll need to trigger all of our functions on the window.load action, since we need to wait until the images are loaded to know what is the right height for the banner (actually that could be done just binding the $bannerimage.load(), but we’ll need to save this topic for later). Let’s do it with this code:
jQuery(window).load(function(){
var $banner = jQuery("#parallax-banner"), $image = $banner.find("img"), height = 0, max = 0;
//let's find the best height for it
height = $banner.find("img").height() / 3;
$banner.height(height);
//this is the maxiumum amount of scroll for still visible banner, cached to improve performance
max = ($banner.offset()).top + height;
//let's position our title in the middle of the Area
$banner.find(".title").css({
"top": ((height - $banner.find(".title").height()) / 2) + "px"
});
jQuery(window).scroll(function() {
parallax_image(max, $image);
});
});
We’re using variables to cache jQuery elements, which is a good practice to improve performance. Also, we’re passing cached items to that parallax_image() function so again we get the best performance.
The great thing on this code that you can have any height for your images, the code will automatically find out which height you’ve got and apply the proper functions.
And now there’s only one function, missing, the parallax_image() which changes the top attribute for our image when you scroll the window. Here it is:
function parallax_image(max, $image) {
var imgTop = 0, scrollPos = jQuery(this).scrollTop();
//rule of thirds to find the new top position for image
imgTop = (scrollPos / max) * (2/3) * $image.height();
$image.css({
"top": -(imgTop)+"px"
});
}
We’ve done a little math to make the image go up proportionally to the scrolling AND the image height, so the bigger images will go up “slower” than smaller ones, which is really good to keep the effect’s consistency.
