On Saturday, inspired by Paul Annett’s Channel 4 logo, I decided to build a parallax illusion in the browser.

Here’s the end result: http://maban.co.uk/sandbox/parallax-illusion/

How it works

To build this you only need 2 images. One is the stripes (mine is a 14×8 gif where 6px are transparent, and 8 are black) and the main image which is actually 2 images in 1 layered on top of each other.

The main image is a bird in 2 states – 1 with its wings up, 1 down. You can have more states, but I wanted to keep this very simple.

The stripes are a transparent, repeating background which appear over the image.

The stripes of the image that are visible need to be the same width as the gap between the stripes that go on top of it. So that the wings on the down state aren’t visible while it’s on the up state, you’ll need to position the blank stripes slightly differently on the down state, in this case 6px to the right of the ones on the up state. Then simply layer the two images on top of each other and save them as one image.

The HTML:

<div class="image">
<div class="strips"></div>
</div>

The CSS:

.strips {
background-image:url("strips.gif");
background-repeat:repeat;
background-position:center center;
height:100%;
width:100%;
}
.image {
background-image:url("background.gif");
position:fixed;
background-repeat:repeat-x;
height:100%;
width:100%;
}

All this does is position the stripes over the image, and make both images the full height and width of the screen since there’s no content in them. The image stays in the same place while the stripes move with the width of the window because they are centred.

More parallax illusions

Paul Annett sent me a couple of links to parallax illusions he’d seen that other people have made: one of a horse running, and one of a 3D object.

I’m planning on doing a full write-up for an upcoming issue of Scrunchup.

The reason I did this talk is because I am concerned that young web designers and developers are jumping into freelancing without much thought, and then discovering how much of a minefield it can be. So I decided to cover things like how to set up, what sort of problems young freelancers come across, and what I’ve learned from the mistakes I’ve made. I hope you find it useful.

Big thanks to Perch and Littlesnapper who provided me with prizes to give out to people who stayed awake during the talk.

Here’s an unedited video of the first set of talks. Mine is 01:06:45 in. I’m hoping an edited version will be available soon.

Here are my slides. If you want to read the notes that go with the slides, click through to the slideshare site.

Here are two YouTube videos that were filmed by Meaghan of the talk.

I really like what Chessbrook are doing, and they were perfect clients to work with.  At the end of the project, I did usability testing with the students to get their feedback on the website.

The navigation was a bit of a challenge.  The selected state was quite fiddly to develop because I wanted the text to resize without dropping out of the green strip. Here’s what I did…

Above is the text at normal size, and below is the text 5x bigger than normal.

I extended the white background at the top of the image so that it would cover the green strip when the text is resized and not look too out of place.  The selected state is actually two images.

This is what the background image for the right half of the link looks like.  It’s long to allow for long links.  When the link is small, it looks shorter.

While I was working on the site, Nat showed me a really good way to make the site more maintainable and use less code.  The site is made up of strips of content – the header, main content, sponsors and footer, and these all have very similar properties (things like they all have a width of 80% and the same amount of margins).  Rather than repeating the CSS for each class, we added a class within each strip called “section”.  So if we needed to make a change to the layout and instead make the width 70%, we would only need to change this in one place.

While interning at Clearleft, I helped work on the front end code for the Mozilla Addons site, pair programming with Natalie Downe.

This was the first project I worked on while interning at Clearleft. I pair programmed with Natalie Downe on the HTML and CSS.

The Portland Arms pub website was commisioned by the landlady to provide information to locals about events at the pub, as well as an up-to-date seasonal menu. The pub dog, Buster, updates his online blog (http://www.theportlandarmspub.co.uk/blog/bustersblog.html) with his perspective of life at the Portland Arms, with photos of the people, and other dogs, he meets.

The landlady takes photos using her iPhone of the food served in the kitchen and uploads them to the website via Flickr. She also takes photos at special events, and these are automatically posted to a slideshow on the site (http://www.theportlandarmspub.co.uk/gallery.php). Many locals didn’t know where the pub was, so I added a Google map which shows users where the pub is, and they can plan their route to the pub using this feature.

The British Band Instrument Company website was launched as an online brochure of instruments being sold to across the world, specifically in the Middle East. I added a translation feature, and made all the text editable so it could be translated into different languages. After some research, I placed the navigation on the right rather than the left because people in the Middle East read from right to left. I also added images onto the buttons (using the “sliding doors” technique) so that the user could visually distinguish the instruments. I used the sliding doors technique to speed up load time and ensured the site was usable on IE6 at a screen resolution of 800×600, as I anticipated that many users in this part of the world would not have fast Internet speeds or high-end technology.