1. Technology

One Million Trees


HTML5 Design Gallery
One Million Trees

One Million Trees

Image submitted for the HTML5 Design Gallery courtesy One Million Trees


A site dedicated to reforesting London, Canada is going to have pictures of trees on it. That is to be expected. But what you should really check out is how they use a layering effect to make the tree in the foreground scroll down as you scroll, the forest in the background scroll as well, but at a different rate, and then have it all overtaken by the grass and then dirt at the bottom of the site.

This is a good looking site. It uses an image as the background, but you'll notice that the text is written right on top of the image. In many cases this would make the text hard to read, but the designers took this into account, using a nice crisp font family, bright colors that contrast well with the dark background, and large sizes for much of the text.

The interactivity is nice on the site. Try moving the slider (about mid-way down the page) to see how much money is saved by planting as few as 1 tree after 1 year. It makes me want to go out and plant a tree in my back yard, and I don't live in London, Canada.

This is a great example of a design that complements the goal of the site. The trees and forest fit completely with the theme and make the site look great as well.

Have you built an HTML5 site? Or do you know of one that does a great job with HTML5? Submit HTML5 site designs to be featured on this site.

©2014 About.com. All rights reserved.