Teaser sites are becoming more and more popular on the web and they are much easier to do with HTML5 functions. This page uses the
CANVAS element to create a smooth path across multiple screens of content.
If you go to the page directly, you will see just one page (the one pictured) saying “Coming Soon.’ But if you click on the Next, you’ll go to another page, and from there a third, and finally a fourth page. You’re probably thinking “so what?” But if you look at the HTML, you’ll see that those pages are all included in the HTML of the first page — in fact it’s really all one HTML document.
This style of multi-page document is seen on many mobile sites, for example jQuery Mobile uses this functionality to good effect. And for a teaser site, this is a great model, as it gets people moving and engaged in the content (what little there is of it) in a fun way.
This document uses HTML5 sectioning elements to create the different pages, which is appropriate. And it uses image replacement to create some of the text images. And as I mentioned, the
CANVAS element creates the cord running through all the pages. This is a fun site that I find very inspiring.
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.