Parallax for WordPress developers

Have you ever wondered how to use Parallax in WordPress? I am going to give you the skinny on how to implement Parallax into any of your future theme developments. After searching all over the internet, I never found a single article that told me the whole process. So I thought, “Wayne your readers need this!” And now here it is.

The Solution

Earlier this week I wrote an article about how to link scripts and stylesheets correctly in WordPress. If you feel like you don’t know how to do this go ahead and read that article because we are going to use that knowledge here in this article.

Step One – CDN the Javascript Files

In the post I discussed above, I provided a CDN resource that I use all the time in my development. There I was able to copy and paste the CDN links to the 3 javascript libraries we need to use Parallax in WordPress. The first is parallax.js itself, second we need localscroll.js, and lastly scrollTo.js. Each one of these libraries give you different functionality that is typically used on a Parallax website. Parallax.js is really the only one you NEED to get the affect you want. The other two are definitely useful if you want the affects they provide. I will go into more detail in later steps. So now you know what you need, now we need to go enqueue along with our other js files. Go into your functions.php file and add these three libraries in with the others.

In the following example I show you how I enqueue my files. The top 6 enqueues are typical things I use like jQuery, Bootstrap, and my main css file. You do need to make sure you call jQuery but the rest of the enqueues are just for my example project. The last three are the files we need for Parallax.

function projectname_scripts() {

           if (!is_admin()) {
                wp_deregister_script('jquery');
                wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.8.3');
                wp_enqueue_script('jquery');
          }
	
	wp_enqueue_style( 'bootstrap_min_css', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css' );
        wp_enqueue_style( 'jquery_ui_css', 'http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css' );
        wp_enqueue_style( 'webteg_main_css', get_stylesheet_uri() );
        wp_enqueue_script( 'jquery_ui', '//code.jquery.com/ui/1.10.3/jquery-ui.js' );
        wp_enqueue_script( 'bootstrap', '//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js' );


        wp_enqueue_script( 'jquery_parallax', '//cdnjs.cloudflare.com/ajax/libs/jquery-parallax/1.1.3/jquery-parallax-min.js' );
        wp_enqueue_script( 'jquery_localscroll', '//cdnjs.cloudflare.com/ajax/libs/jquery-localScroll/1.3.5/jquery.localScroll.min.js' );
        wp_enqueue_script( 'jquery_scrollto', '//cdnjs.cloudflare.com/ajax/libs/jquery-scrollTo/1.4.11/jquery.scrollTo.min.js' );

}

add_action( 'wp_enqueue_scripts', 'projectname_scripts' );

Now that you have the files enqueued, you can start building your HTML and Css structure.

Step Two – Create the HTML/CSS

First we need to create a full width container using a div with an id. In this case I have created a div with an id of intro.

	<div id="intro">
            <div class="wrap_1280">
               
                <h1 class="intro-tagline">
                     <!--THIS COULD BE FLOATING CONTENT-->
                </h1>

            </div>

	</div> <!--#intro-->

All of this isn’t needed, but the way I designed it there would be the full width parallax image and a paragraph or title in the middle. I have a standard class called wrap_1280 that creates a max-width container of 1280px that is centered on the page. Then inside I added an h1 tag with a class of intro-tagline for the content to go inside. We now need to apply the appropriate css to style our Parallax area.

Here is the styling we need for our container, in this case our div#intro.

#intro{
    background:url(images/firstBG.png) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 800px;
}

Here we set the background image, told it to not repeat, center both horizontally and vertically, and to be fixed in position. Then we applied the background-size to be set to cover with all of the appropriate browser prefixes. Then I simply set the height I wanted on that container.

Final Step – Make it function

We now need to call the function (instantiate the function) which basically means to tell Parallax which item you want it to apply to and give it some extra info it might need to work. I will explain this in detail below. First we need to decide where to call the function. There are two places you could call it depending on where you have your Parallax happening or on how many pages are using it. Typically you want to add function calls into your footer.php file, however, that will apply it to every page. If that page isn’t using Parallax you can sometimes get console errors. So I prefer to put the function call at the bottom of the page that uses it. Therefore, if I have a static home page that is the only page that uses Parallax then I will put it at the bottom of front-page.php or index.php whichever you use. Just insert it right before you call the footer.

Below is the code to instantiate the Parallax function.

<script type="text/javascript">

   jQuery(document).ready(function(){

	jQuery('#intro').parallax("50{d28a336400473281ecafcd3e581d1c42e2ddc167997abc26aab972fb90aa55e1}", 0.4);

   });

</script>

In between script tags we create a document ready function that starts your function when the document is ready to start loading. Inside the ready function we call jQuery, open and close parenthesis and single quotation marks (”). Inside is where we put the id or class name of the div we want to apply Parallax to. In our case it is the div with the id of #intro. Then we have to attach Parallax to this item by adding .parallax() to the end. Inside the parenthesis, you can add different parameters to make it do different things. I only use two in this example. The first parameter I use controls the range over which the layer or image travels. I told my image to travel 50{d28a336400473281ecafcd3e581d1c42e2ddc167997abc26aab972fb90aa55e1} of it’s range. The second parameter is the rate of speed it travels. This is indicated from 0 to 1. The lower the decimal the faster it travels. I used 0.4 in this example.

That is it folks. You now have a working Parallax area. Remember those other two CDN files we attached? Those correspond with a single page layout where you have a nav menu that takes you down to different sections of that page. The localscroll.js and scrollTo.js make it easy for you to have a sliding affect down the page instead of just instantly popping down to that section. Below is the example of how to use this technique.

<script type="text/javascript">

   jQuery(document).ready(function(){

        jQuery('ul.menu').localScroll(800);

	jQuery('#intro').parallax("50{d28a336400473281ecafcd3e581d1c42e2ddc167997abc26aab972fb90aa55e1}", 0.4);

   });

</script>

This is the same code as above but inside the document ready function we are going to tell local scroll which buttons are going to be clicked to take the viewer down the page to the section they chose. I have a simple ul with a class of menu and each li has an anchor tag that includes an href with the id of the section I want to travel down to. All you have to do is add the element you want to apply localscroll to. Then, inside the local scroll function you tell it how fast you want it to travel down the page.

It is super easy to use Parallax in WordPress and now you have another tool in your arsenal of web development techniques! Use these tools wisely!