By
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.
