Introduction
When I set out to design Pixel Fable, I imagined a site overflowing with content and fun stories. Then reality happened. I needed to deliver a site that told a story, not just held content. A one page site was the simplest way to do this. I wanted the user to move steadily down, discovering new illustrations and sections of the story as they scrolled.
This post describes the markup, CSS, and javascript I used to create pixel-fable.com, as well as some of the pitfalls I ran into. I will not get into the augmented reality portions of the site, as that requires a longer and more technical post.
The Parallax basics
Simply put, different layers of your site move at different speeds as the user scrolls. The simplest site that use this simply scroll up. Other more complicated sites incorporate horizontal and diagonal animation, to create or disassemble imagery. The fun of it comes in knowing that as the user, you control the animation with your finger. This effect is made possible with jQuery scripts that animate the HTML and CSS.
I looked at the following sites for inspiration:
The Images
The images may have been the most difficult part of this. There were a large number of background images I wanted to use, and the files were massive. I decided to:
- Combine them into image sprites to reduce server calls, even at the expense of slightly larger image files. I used three main sprites for the images. A few of the images I used were not appropriate for sprites because they repeated horizontally, but they were really small, and it was an acceptable file size increase.
- Use patterns and repetition to create visual interest, while keeping the total number of images down to a bare minimum. Although Pixel Fable started off with about 6 large background images and lots of fancy patterns, that got trimmed down to two large background images and 2 triangle patterns. This allowed me to use them in different places and still get complex layered animation.
The HTML
I used HTML5 markup for this site. By that, I mean the header, nav, article, and footer elements. The rest of the HTML uses boring old ids and classes.
For the sake of simplicity, I have shortened the header and main navigation here, as they have no effect on the parallax effect. Each article holds content: text, images, anything that needs to move at regular scrolling speed.
<div id="parallax-triangle"> <div> </div> <div> </div> </div> <div id="thatswhy-bg"> </div>
The #parallax-triangle1 and #parallax-wisp3 divs contain all the background images. Each of their inner divs move at a different speed. This is done via the CSS, by reading the top: property (see below)
The CSS
#title {
position: absolute;
display:block;
clear:both;
top: 0px;
height:800px;
padding: 200px 0 0 40%;
}
/* triangle styles 1 */
#parallax-triangle1 {
position: fixed;
left: 50%;
top:0;
width: 1200px;
margin-left: -600px;
}
.triangle1-1 {
width:500px;
height:270px;
background: url(../images/hi/pf-images-sprite.png) no-repeat -227px 0;
top: 1090px;
left: 40%;
position: absolute;
}
.triangle1-2 {
width:500px;
height:146px;
background: url(../images/hi/pf-images-sprite.png) no-repeat 0 -659px;
top: 2100px;
left: 5%;
position: absolute;
}
Each div has a background image, and the size of the div is cropped exactly, so no other bits of the image sprite show. Top aligns it vertically from the top of the page, while left aligns it horizontally. I use % for left, to allow for responsive resizing.
Multiple Backgrounds Where Necessary
#thatswhy-bg{
background-image: url(../images/hi/triangle-repeat-white.png),
url(../images/hi/white-blue-fade.png);
background-position: 0 bottom, 0 0 ;
background-repeat: repeat-x;
width:2400px;
height:1000px;
top: 8800px;
left: -2%;
position: absolute;
}
I added CSS3 multiple background images to #thatswhy-bg. This meant a more layered effect inside a div, while not having to control the movement of the pieces with javascript.
Media Queries
I needed to use media queries to control the background images and the alignment in smaller windows. While I will not list any examples here, you can look at the source of pixel-fable to see how I handled them.
Javascript
I didn’t write this script. Far from it. It was written and posted originally by Jonathan Nichol on his site f6design. I simply used the .js file he provided.
All Together Now
Final Thoughts on the project
The parallax bandwagon seems to have come and gone, for the most part, and I am OK with that. My goal here was to tell a compelling story, and this particular technology worked perfectly for that. The code we use and the stories we tell online need to work very closely together. The Pixel Fable site was, for me, a close fit, and utilized the best parts of HTML, CSS, and javascript. All in all, I am happy with the result, especially for a first try at a storytelling site of this nature. Thanks for reading through.