News

Create horizontal parallax scrolling with jInvertScroll

Using horizontal parallax is an innovative way to showcase your site. There is no doubt that ‘wide’ can be better than ‘tall’

jinvert

You don’t need to spend long with marketing and design people before someone’s going to use a phrase like ‘Yes, but what’s the differentiator?’. But they’re not talking algebra or electronics, they’re just reaching out for something, anything, that might make what they are working stand apart from the competition.

Different is good because it causes people to pause…and pausing enables an opportunity to consider. It helps the brain to remember and it encourages people to share that experience with others. These are good reasons for doing things differently and providing your visitors with a fundamentally different way of interacting with your content must be worth a try.

Computer and TV screens are wide rather than tall because it’s more natural for us to engage with the world in that orientation. Ancient man didn’t do much for his survival or hunting chances by spending his time looking up and down. Looking around is how you’ll find most of what’s interesting and what makes landscapes and panoramas so compelling. So why not give your visitors a break from vertical scrolling and an opportunity to take the wide view?

The HTML

The head of the HTML is kept fairly simple, with the Open Sans font being loaded from Google’s font library. Next a link to the jInvestScroll stylesheet is made that includes only ten lines of code. Finally there is a link to the styles for the parallax elements and the content panels.

001     <!DOCTYPE html>
002     <html>
003     <head>
004         <meta charset="utf-8" />
005     <title>The Hot Air Balloon</title>
006     <link href="http://fonts.googleapis.             com/css?family=Open+Sans:400,300,700"rel="style    sheet"type="text/css" /> 
007     <link rel="stylesheet" href="css/           jInvertScroll.css" />
008     <link rel="stylesheet" href="css/style.    css" />
009     </head>

Background

The background comprises two elements: the horizon scroll and the middle scroll. In the artwork used for the tutorial the horizon scroll is the landscape graphic and plain blue sky and this sits as the background layer on the page. The middle scrolls sits in front of this and provides the graphics for the clouds, balloons and birds.

001     <body>
002     <div>
003     <div>
004         <img src="images/background.png" alt=""    />
005     </div>                            
006     <div>        
007     <img src="images/cloudsandballoons.png"     alt="" />                                    
008     </div>

The content layer

The content layer is last and given the class ‘front scroll’. You can of course add additional parallax layers if you wish but try to keep the right balance between achieving a design that is visually rich with one that is simple enough to render smoothly. Each of the content panels is added as a separate <div>.

001        <h1>Scroll down</h1>
002        <div>
003        <h2></h2>
004        <p></p>
005         </div>
006         <div>
007        <h2><h2>
008         <p></p>
009         </div>

The script

After all the content has been loaded the jQuery is called, then the jInvertScroll.js plug-in before the plug-in is actually executed. The plug-in ships with jQuery version 1.10.2, so you’ll want to test the functionality is not affected if you use an earlier or later version of jQuery to deliver other functionality for your site.

001        <script type="text/javascript" src="js/    jquery.min.js"></script>
002        <script type="text/javascript" src="js/    jquery.jInvertScroll.js"></script>
003        <script type="text/javascript">
004        (function($) {
005     $.jInvertScroll(['.scroll']);
006     }(jQuery));
007        </script>

Hide and scroll

These styles are found in the jInvertScroll.css and are likely to remain the same whatever your design. This technique uses the vertical scrollbar to show the user how far along the page they are, so the horizontal scrollbar is switched off here. The page elements are anchored to the bottom of the browser and this will suit most designs.

001   {
002        overflow-x: hidden;
003        }
004        .scroll
005     {
006     position: fixed;
007  bottom: 0;
008  left: 0;
009  }

Design-specific styling

Padding and margins are set to 0px to assist with cross-browser consistency. A Google font is selected
(loaded in the HTML as usual) and a fallback is listed. Font-weight 300 sits nicely between ‘light’ and ‘regular’, an elegant but readable weight. Simple touches such as this can really help to elevate your design above the norm.

001   {
002        padding: 0;
003        margin: 0;
004        font-family: 'Open Sans', sans-serif;
005     font-weight: 300;
006     font-size: 16px;
007  color: #555;
008  background: #9fdefd; 
 009  }

Headings and background

Here the headings are set to a suitable colour to integrate in your design. The first parallax element is styled here. With the lowest z-index number it will sit at the back of the design. As the rearmost object it will scroll at the slowest speed and should therefore be the narrowest element (in this case 3,000px).

001   h1,
002        h2
003        {
004        color: #238acb;
005     }
006     .horizon
007  }                    
008  line-height: 0;            
009  z-index: 100;                
010  width: 3000px;            
011  }

Clouds, balloons and birds

The sandwich filling in this three-layer arrangement comes next and so has a middling z-index value. This element is 50 per cent wider than the background. In the tutorial it contains the clouds, balloons and birds. You’ll need to use a transparent PNG for the graphics on this layer so that you’ll see the layer behind it.

001     .middle
002     {
003     z-index: 250;
004     line-height: 0;
005     width: 4500px;
006     }

Content layer

This layer is the top of the sandwich, the front-most layer with the highest z-index value. This is your content layer and moves the most when it is scrolled. With a width of 6,000px it moves twice a fast as the background. In this tutorial the layer contains the information panels.

Avoid confusion

As with any technique that doesn’t work exactly how the user is expecting, it’s important to help things along with a little instruction. This first element is set at 500px from the left of the page, which should work for most setups. There’s no responsive solution here because we want people to scroll beyond the width of their viewport.

001     .intro
002     {
003     position: absolute;
004     left: 500px;
005     top: 0px;
006     padding-right: 50px;
007     background: url('../images/scroll.png')     no-repeat right 5px;
008     }    

Content panels

This class determines the basic properties of the content panels. You can make these as complex or as minimal as you prefer. Having discrete areas of content with good sized gaps between each panel works well with this technique though, so keep in mind usability if you do decide to start getting really creative.

001     {
002      top: 0px;
003         width: 500px;
004            background: white;
005            padding: 10px 30px;
006            border: 1px #eee solid;
007             position: absolute;
008     }

Panel positioning

Now it’s just a case of finding the right place for each of your panels to appear. It’s easy to get drawn into overtweaking this as you fine-tune the interplay between the layers. However, remember that the height and width of the browser will play a huge part in the positioning of the elements and aim for a design with some flexibility.

001        .panel1
002        {
003        left: 1500px;
004        }                                                                                            
005        .panel2
006        {
007        left: 2575px;
008        }                                                                 
009        .panel3
010        {
011        left: 3800px;
012        }                                                                 
013        .panel4
014        {
015        left: 5100px;
016        }

In context

This tutorial just shows the horizontal-scrolling element of a page, but with a real website you’ll probably want to include other non-scrollable elements. Fortunately that has been thought of and only the elements with the attribute ‘position: fixed;’ will scroll. Your header can be styled as normal and, as this is likely to include a navigation menu, it will helpfully remain in view at all times.

Your design concept

Horizontal scrolling is a useful technique when you want to show a sweeping panorama or a journey with stages along the way. A comic strip would be particularly suitable for this style of presentation. Here the we use a free graphic from vectorbackground.net separated into its component elements starting with the background.

The sandwich filling

If you are going to use mainly words on your top layer, for example when telling a story, your middle layer is likely to be the graphical subject of your design. This layer probably needs the most amount of attention if you are creating a portfolio-standard piece of work.

Content panels

In the tutorial these panels have been kept simple and provide a contrast to the busier balloons and landscape background. However if your design warrants it, this layer can be as visually rich as you want. You can apply more formatting, images, etc, to achieve your design goals.

All together now

When you bring all of the elements together, does your design work as you expected it to? You might need to go through several rounds of iteration changing elements as necessary so that they work together. You’ll know you’ve cracked it if you can picture your audience not asking themselves why you’ve used a slightly quirky layout trick but just being drawn into the content and accepting your presentation of it as the most natural and logical solution.

×