Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Behind The Scenes Of Tourism New Zealand (Case Study)

In 2011 we saw the rise in popularity of two relatively new trends: responsive Web design and the use of HTML’s canvas. While some websites had experimented with both, in the last 12 months we’ve seen these trends move from the fringes firmly into the mainstream.

Responsive Web design is more a concept than a technology — an ideal that many new websites aspire to. Canvas, on the other hand, is an HTML5-based technology that opens the door to a new wave of interactivity. In this article, we’ll look at a website that embraces both of these elements, one that has been nominated for a Technical Achievement award at SxSW Interactive 2012: Tourism New Zealand1.

I spoke with the creative and technical teams at the New Zealand-based firms Shift2 and Assembly63 about the technology behind Tourism New Zealand’s home page, how it was made and how they balanced the breakthrough effect with bandwidth.

After we learn how Tourism New Zealand was built, we’ll look at the basics of putting together your own animated HTML5 canvas background.

The Inspiration Link

Tourism New Zealand has a history of strong media and advertising campaigns, particularly through TV commercials, and its destination marketing website has long featured these videos.

So, when a redesign of the website was planned without an accompanying TV commercial, the team at Shift had a new challenge: to showcase the landscape and breadth of activities in New Zealand to an audience that has come to interact with a website, not to watch a video.

Shift was inspired by, among other things, Nike’s Better World website (which Smashing Magazine has covered4). But whereas that website used HTML5 animation to create an effect of parallax scrolling, Shift proposed a camera view that moves through the real world.

Shift’s first idea was to use video as a background, with the camera descending through some of New Zealand’s most exciting locations. The problem was bandwidth: at 25 frames per second, Shift would need to deliver thousands of full-screen frames. This was an impossible goal, so instead the team set a target of around 200 frames for the entire website. But 200 frames for the amount of footage they wanted worked out to about three frames per second, which doesn’t look particularly good.

At this point, they nearly abandoned the idea.

By chance, though, a solution was found. Scrubbing through a QuickTime video, Shift’s creative director, Mark Zeman, noticed that being able to control the frame rate as you move the play head gives the illusion of a smooth experience. He suspected that if the browser’s scroll bar could be used to scrub the footage, it would feel similarly smooth. And if the camera shot photographs as it moved through each scene, it would create the illusion that the user was practically controlling the camera as it descended through New Zealand.

The first prototype was made with a few images and some JavaScript, just to prove that the browser could handle this type of manipulation. Freelance front-end developer Jeff Nusz5 was then tasked with turning this proof of concept into a working website. The brief was simple: no loading bar, and the first frame must load almost instantly. Furthermore, the website had to be usable even when the user doesn’t wait for all of the images to download.

On Location Link

With the prototype built and approved by Tourism New Zealand, it was time to load up the trucks with scaffolding and start shooting.

Shift worked with directors Damon Duncan and Matt von Trott of Assembly63 throughout development of the project, which enabled them to build the large motion-control rigs that were required for the shoot.

A 15-meter-high motion-control rig was built, with a vertical dolly track that housed a Canon 5D DSLR. The rig was set up at each location, and the camera travelled 12 meters down it, taking anywhere between 750 and 950 stills, a process that lasted at least two hours each time (and six hours at Milford Sound, the first location on the website), because the camera moved around 15 millimeters every 10 seconds.

Milford Sound8, New Zealand

Each location took three days to shoot. The first day was spent building the tower and putting together the motion-control rig. The second day was usually spent rehearsing the scene, and the third would be for the actual shoot, which included multiple passes of the scene. Indeed, the scene for Waiheke Island is a combination of two takes.

Time-lapse sequences from all four shoots (watch on Vimeo9)

Front-end developer Jeff Nusz had built a suite of tools to help the crew plan the photography. The directors also showed the original prototype to the cast and crew, which helped to demonstrate what they were filming and how the time-lapse footage would work.


Post-Production Link

There were only five days between the final day of shooting and the launch of the website. Most of the code had been written and ported to JavaScript using prototype images, and so it was now a matter of editing the hundreds of photos from each location down to 200 hand-optimized 1280 × 720-pixel frames.

The team spent time testing the website in each browser, noticing different memory quirks in Chrome and Firefox, and it worked on optimizing the website’s performance. Because many of New Zealand’s tourists come from China, the time was also spent making sure the website worked even in IE 6. To better understand the toll of such a heavy home page, Shift used WebPagetest11 to test it from various parts of the globe.

From 25 MB To 300 KB Link

Although the entire website weighs in at 25 MB, it enables a usable experience after the first 300 KB of data and images have loaded.

On the initial loading of the page, a 40 KB image is loaded that contains all 200 frames at a very low resolution. This means that as soon as the initial frame of Milford Sound has loaded, you can scrub through the entire website and get some approximation of the full experience. Then, when you stop scrubbing, the website loads the frame you’re on and starts loading the frames before and after it. Moreover, as you scroll the page, all downloading activity stop to ensure the smoothest possible scrolling experience. When you stop scrolling, all downloading resume.

Interestingly, Jeff’s background is mainly in working with Flash, so the initial website was built in Flash and then ported to HTML5 at the last minute. Jeff says that the similarities between ActionScript and JavaScript made this a relatively pain-free process:

ActionScript 3 is a lot like JavaScript. I did a lot of the work in Flash, and I wanted to see how well it would translate, and it was pretty much cut-and-paste for the most part. I just had to structure things in a similar way and make a few semantic changes. Ninety percent of the code ported as it was, which was great.

One of the team’s early breakthroughs was in figuring out how to split up the website’s elements. You can see in the sketch below how a website normally works: you have a long page and, conceptually speaking, the browser’s viewport moves up and down the page (i.e. the latter moving across the former).


In this next sketch, the page itself is a giant empty GIF that you scroll up and down; but the website detects every time you scroll, calculates your position and then translates that to the frame you should be on. The height of the window also changes depending on how big your browser’s viewport is, because if the page is huge and your viewport is small, then the scroll bar would be tiny; Shift wanted to keep the size of the scroll bar consistent, regardless of the browser’s size.


As Jeff notes, “Although it’s not exact, the goal was that one click of your mouse-wheel would be one frame”:

The tag layer and the UI layer is just HTML and CSS, but the background is either an HTML5 canvas that we draw to or it’s Flash. There’s about a 20-millisecond lag between the frames moving and the background changing in Flash, so the canvas version became the primary method used for browsers that support it.

The tags do not scroll in the conventional sense, but for each frame, they are assigned specific x and y coordinates based on the frame. This allows tags to be “glued” to background elements — a tree, mountain top, etc. — and these coordinates would be recalculated on the fly if the browser window was resized.

To create this effect, the team used Adobe After Effects to keyframe each tag and output the coordinates. Jeff built a PHP script into which the team could copy and paste the After Effects keyframe data, whereupon the script would generate JavaScript that the website could use. Jeff then tweaked the tags in JavaScript to make sure they scrolled as expected.


Sprite Sheets Link

To create the illusion that the page loads quickly, Jeff came up with the idea of using sprite sheets. As he puts it, “The sprite sheets were the breakthrough that allowed us to make the website usable so quickly after the page loads”.

The first frame (of the background image) is 90 KB. So, together with the first low-resolution sprite sheet (which is 30 KB), these images initially weigh only 130 KB. Once the page has loaded all of the content, it loads a higher-resolution sprite sheet, and then another, and then it loads in the full-resolution images one by one. Rather than loading these large images in sequence, it loads them based on your scroll position within the document.

You can check that the sprite sheets load before the full-resolution images by turning the Webkit Inspector on and watching the “Network” activity after the page has started to render.

Using Inline JavaScript Link

I asked the team at Shift why so much inline JavaScript was in the head of the document. Best practice would suggest it should be moved to a separate file. However, something more is going on here.

Shift’s solution architect, Glenn Wright, has been working on the website for the last six years. He explains:

The inline JavaScript is there to define the configuration for each page. We can cache each page’s configuration in JavaScript, then all the external libraries that the page loads utilize that data. It gives us an easy way to configure the responsive grid and all of the interactions that the page will have to use.

Testing Mode Link

A testing mode on the website lets you see some of this loading process in action. Clear your browser’s cache, load Tourism New Zealand’s home page, and then hit the tilde (~) key five times to enable testing mode. You won’t see any change immediately, but once in this mode you can use the following keyboard commands:

  • 1
    Turn on the visualizer for “frames loaded”
  • 3
    Toggle tags on and off
  • 0
    Toggle the high-resolution image on and off
  • -
    Go to the previous low-resolution sprite
  • +
    Go to the next high-resolution sprite

Building Your Own Canvas Background Animation Link

While websites like Tourism New Zealand take months to design and build, creating your own animated canvas background is relatively straightforward. All it takes is a little JavaScript, a pinch of HTML5 and an enormous amount of imagination to dream up a worthwhile use.

Indeed, a word of caution is in order. We all know that with great power comes great responsibility, and just because we can load 50 high-resolution frames and animate them as the user scrolls the window doesn’t mean we should. As mentioned earlier, websites that use this technique are both lauded and criticized. Make sure that you are enriching the user experience rather than needlessly slowing it down.

First, we need to do a couple of things. Let’s grab some video (a time-lapse video works best for this), and then create our 50 frames. You can create as many frames as you like, but we’ll stick with 50 because this is how many Tourism New Zealand uses for each scene.

Next, let’s grab some royalty-free time-lapse footage from Artbeats15 and import it into iMovie, where you can export individual frames.

Choose Share → Export Using QuickTime, and in the pop-up dialog box select “Movie to Image Sequence.”


We export the images as JPEGs, which leaves us with hundreds of images. So, we have to do two things:

  1. Batch process the images in Photoshop to the required size (here, we went with 480 × 270 pixels to maintain the aspect ratio).
  2. Edit the number of images down to 50. Shift was painstaking in doing this, retouching and editing thousands of images down to just 200. To keep things easy for this tutorial, let’s just delete three photos out of every four.

You should now have 50 photos that, when played in sequence, make for a somewhat choppy time-lapse video.

On to the next couple of steps. First, we’ll figure out how to load the images in the browser and control them with the scroll bar. Secondly, we’ll create our own sprite sheet and use that instead. Open your code editor of choice, and create a new JavaScript file. Or why not head over to GitHub and download the project17 to play around with?

You’ll also need an HTML file with a canvas element in it, which is as simple as this:

<canvas id="canvas"></canvas>

Hopefully, the comments in the code sufficiently explain what’s going on, but here’s a breakdown anyway.

First, we set up the canvas element and use some basic maths to set start and end points:

// Create our timeLapseVideo object and cache the window object
timeLapseVideo = new Image();
$window = $(window);

// Define the timeLapseVideo element
timeLapseVideo.onload = function(){
  videoContainer.width = 960;
  videoContainer.height = 540;
  videoContext.drawImage(timeLapseVideo, 0, 0, 960, 540);

// Load the first frame
timeLapseVideo.src = 'images/TimeLapse001.jpg';

// Calculate how far to scroll before changing a frame
var scrollDistance = $window.height() - $window.scrollTop(),
    totalHeight = $(document).height() - scrollDistance;
    frameDiff = totalHeight / (numberOfFrames - 1);

Then, when the window scrolls, we work out which frame needs to appear on screen:

// Which frame do we need to show?
frameString = (Math.round($window.scrollTop()/frameDiff) + 1).toString();

// Change the image in the canvas
timeLapseVideo.src = 'images/TimeLapse' + frameString + '.jpg';

Make sure to go through the full source code18 to see it in action. Be careful, because there is no check to determine whether an image has already loaded; you could end up hitting your server with hundreds of requests per page. So, like Tourism New Zealand, you need to build in a check to see whether an image has been cached.

Creating And Using A Sprite Sheet Link

We can also create our own sprite sheet with our image to emulate more of Tourism New Zealand’s behavior. Some apps and websites are available to help you do the job (see the “Related Links” section at the end), but it’s probably easier to run a simple script that pastes all of the images onto a canvas and then take a plain screenshot of that. The code for this script is in the GitHub repository19 in case you want to take a look.

There are two main differences with this technique. First, we load only one image onto the canvas, which is the sprite sheet:

timeLapseVideo.src = 'images/spritesheet.jpg';

When the window scrolls, we then draw part of this sprite to the canvas:

videoContext.drawImage(timeLapseVideo, x, y, 80, 45, 0, 0, 960, 540);

In the line above, x and y are the starting coordinates of the sprite, which in turn are dictated by the frame. We’re using a simple loop to iterate through the sprite to find the right coordinates, but you could set up an array of values to look up. These tiny frames are 80 × 45 pixels, and they are drawn from 0,0 to 960 × 540 pixels. CSS then stretches this canvas to fit the entire window.

You can improve this script a great deal by, for example, preloading images when the user isn’t scrolling (some links are below to point you in the right direction). If you make improvements, please do share your work in the comments below.

Creativity In Design And Development Link

Distilling 18 months of hard work into one article like this is an impossible task. Shift had the time and budget to fly around New Zealand and take thousands of beautiful photographs. This is not an option for the average Web designer!

However, what is perhaps most striking about Tourism New Zealand is the imagination in its concept and execution. By taking the leap from virtual to physical world (and back again!), the scroll bar has become a conduit by which the user can control their experience of New Zealand — if only for 200 frames.

Jeff’s ingenious loading techniques and the use of sprite sheets also kept away the loading bar that is so familiar with websites like this. On an average broadband connection, the experience is effortless and fun.


Perhaps the biggest lesson to be learned here is this. Despite its many bells and whistles, Tourism New Zealand encourages the user to discover the website in much the same way they would discover the country.

Technology supports the great design, not the other way around. If we could all exercise this level of creativity, imagination and user engagement, then we, too, would create amazing websites that shape the future of Web design.

I must extend my very special thanks to Jeff (@jeffnusz), Glenn, Che and, in particular, Mark (@markzeman), who were patient with my intermittent Skype connection and who were so transparent in offering their thoughts and many of the images and resources featured in this article.


Footnotes Link

  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30

↑ Back to top Tweet itShare on Facebook


Richard (@richardshepherd) is a UK based web designer and front-end developer. He loves to play with HTML5, CSS3, jQuery and WordPress, and currently works full-time bringing to life. He has an awesomeness factor of 8, and you can also find him at

  1. 1

    Thomas Strobl

    March 8, 2012 4:04 pm

    Couldn’t resist to read until the end. Utterly stunning article about a captivating project. Keep it up!

  2. 2

    Wow, what a website. That is so so clever.

    Great article thanks!

  3. 3

    Wow.. Awesome Article.. Amazing work by Shift.. I really love the concept!

  4. 4

    The kind of site that blows your mind when it launches, but can become dated very quickly. I think of early Flash websites when I see this. Could be just jealousy talking, because creative ran wild on this and must have had fun doing it! At the end of the day, it doesn’t make me want to go to New Zealand though, so I wonder if “coolness” overshadows the natural beauty of the desitnation. Fascinating process and a great read.

    • 5

      I have to agree, its cute but this will date really quick. What is more concerning to me, is that in order to see the cool canvas effect a user has to do something they usually hate doing, scrolling. Its fine to scroll when your invested in a site, but when your coming to a new site its a bite annoying. On top of that, if you are on a large screen, there is very little reason to scroll (I actually looked at this website, and wondered what all the fuss was about. It actually looked messy to me with the content strewn all over the pIace, and I didn’t get any encouragement to scroll and was not going to do so just for the hell of it).

      I may be alone in this but i want to get content quick and scrolling through some pretty animation really doesn’t do that. If I didn’t know NZ was as so amazing already, I would have given up on this.

      • 6

        I sense a lot of haters in this thread… I saw this site and was impressed when I started going through it.

        It will date really quickly? You provide no real analyses for this besides comparing it to flash or just saying it with no basis at all. A marketing site needs to be revamped at least every 12 – 18 months anyway…

        Also, you hate scrolling. Well this quality effect should make you hate it less. I mean with the clouds rolling through doesn’t catch your interest when you start scrolling and then make you scroll all the way to the bottom?

        I mean god forbid making anyone scroll… IDK, I get the point you’re trying to make, but I think it just doesn’t hold any weight in this case.

        I really dislike people who just bash creativity without at least offering some positive feedback on a decent to great feat.

        Way to suppress innovation karina

      • 7

        Mark Simchock

        March 17, 2012 6:34 pm

        Agreed. It’s not clear to me how / why scrolling – which NO ONE likes – adds value to the experience.

        I’d also be curious to know what kind of analytics are hooked into the UI / UX so the client and the devs can evaluation the effectiveness of the experience.

        Finally, and I realize I’m somewhat atypical, but on my tethered 3G connection it’s a very difficult site to consume.

        It’s a great live proof of concept but I wouldn’t be surprised if they end up with a total makeover in a year or less. The whole idea strikes me as being too much about the brand and the designers/developers with the most important element, the information consumed, being an afterthought.

        Perhaps it’s just me?

        • 8

          Ziad Naseriddin

          March 25, 2012 5:13 pm

          Scrolling is cool! very cool animations … though; Usability tests showed that almost 80% of the visitors don’t think of scrolling down unless there was something telling them …

          If i was in this website team I would recommend having something in the design to indicate or point at scrolling down, especially considering that most of the visitors of this website are not experts in web …

          I also have my observations in regards to SEO.

          However; I must say, It’s a very clever idea of how the front-end developer dealt with the content.

          Thumbs up for the concept!

          • 9

            Totally agree with folk who are saying there’s no indication to scroll down.

            With all that effort gone on design, how hard is it to stick a button on, saying, ‘Scroll down to discover NZ’.

            Even then, I found the lack of smoothness and the moving people a little distracting. Would have been better to have just one consistent image instead of people moving around in the frames.

            Great for the portfolio, not sure about the NZ tourist board though.

  5. 10


    March 8, 2012 5:17 pm

    While it is visually very nice. I’m running a brand new i7 mac on FF and it’s almost impossible to scroll down because the page “chugs” like crazy. It’s very cool, but man I can’t imagine what it’d be like on a less powerful machine.

    *I just took another look, and tried again. I closed the page, it’s unusable imo.

    • 11

      Matthew Shipley

      March 8, 2012 7:17 pm

      Interesting point, I’ve been looking at this on an old(ish) Windows XP box with Chrome, which ran rather well.
      Moving over to Firefox gave me a much rougher ride and was disappointing.

      I’m wondering if this will improve with new browser editions, as hardware wouldn’t seem to be the issue…

    • 12

      No problems in Safari, whatsoever.

    • 13

      I’ve got the same experience. I’ve been to New Zealand recently and I tried using this website to plan our journey. The result was failure, the only way to use this website is to disable JS.

  6. 14

    quadcore mac pro: 100% cpu usage on scroll, choppy scroll.
    + for the idea
    – for the implementation

  7. 15

    Matthew Shipley

    March 8, 2012 7:08 pm

    Great write up, its refreshing to see an article that both explains the ideas behind the project and also covers the teams findings and technical challenges along the way.

    Love the website, great work (needs some tinkering on my phone…). The time and effort developing this really show with an impressive site that ultimately does showcase New Zealand very well. It’s projects like this that remind me why I love the web.

  8. 16

    From a technical stand-point this is very very cool, but in terms of implementation I have to agree with Paul and some of the other comments. Dell is using a similar technique for the dedicated site of their new 13″ ultra-book and it just doesn’t feel like it will age well. It’s too neat an idea to just go away, so hopefully we see it evolve or applied to something else.

  9. 17

    Nice article, shame the site doesn’t work for me. Like doesn’t load, takes too long…

  10. 18

    Great Article and wonderful website. What a brilliant idea Tourism NZ to attract holiday makers. Plus, what a wonderful creativity to Shift implementing this project..!! that’s what I call Kiwi Ingenuity… 100% Pure Creativity.. Thanks for this awesome Article

  11. 19

    Great article, i always curious about the technologies behind the awesome looks. It’s really a cutting-edge website. It’s great for user experiences and blow people’s mind.
    Encourage more dev and design agencies doing more out-box-thinking and make the web a better world.

  12. 20

    once you click a tag and dive into an article from the scrolling canvas, i have no idea how to get back to the scrolling canvas fun I just came from. All i can do is see more articles and get further into a wormhole until I hit ‘home’. then i have to re-scroll down the page to find where I left off.

    While i love the tech and visually stunning, UX needs a bit of polish.

    Running FF9.0 on mac and it did not work. Had to open Chrome. For something that should be accessible to the masses (i’d think they’d want anyone and everyone to be able to view it as everyone s a possible tourist) there seems to be browsers that cannot access some content via scrolling. Top nav is required to be used. Wish there was a fall-back for scrolling content on non-HTMl5 browsers.

    Please do reply if I have totally missed something as I want to like it more. Thanks for the in-depth behind the scenes write up.

  13. 21

    I love the concept of this site and this article, its quite an interesting.

    As previously mentioned it is substantially choppy, in chrome, and firefox for me. ( Macbook pro 2009, core 2 duo, 8gb ram, intel 320 series ssd )

    In safari it is still a bit choppy but much smoother than the previous 2.

    I love the immersion of the giant photos, however I would have likely got the same effect from a static background image, that may change from page to page. Generally when I visit tourism sites, I’m already sold on the idea of going there, and am looking for information. This site provides lots of useful information including flights and planning. However the choppy loading and amount of script going on hinders the entire smoothness of the site experience.

    One last thing that I love about this site, in regards to the carefree use of massive images, huge load on the browser, and use of responsive design, is that it’s really a future move. By that I mean it’s so technically fat, that even the most modern browsers can’t handle it, and it’s further pushing competition and the idea of not hindering what you want to create by what is feasible to create.

    And they made it work back to ie6 which is impressive.

    I recently implemented this idea, although not nearly in a comparatively impressive scale, by building css3 navigation menus. People with the newest browser get an animation. People with ie8 get a dropdown without an animation. Ie6 users get no dropdown. Push for the new technology. ( This was a business’ site )

  14. 22

    Love the home page on a desktop, but the experience on mobile is another story. It is almost unusable.

  15. 23

    Pretty pictures over usability. A step backwards in my opinion.

  16. 24

    Apart from the gimmicky homepage effect, to me this site has UX problems.

    I personally didn’t know where to start, and I would love to visit New Zealand someday.

    Is a website a ‘success’ if it’s audience can’t use/understand it?

  17. 25

    I’m curious who was the first person to come up with this? This is the third example of this technique that I personally have seen, and I’m sure there are more. The first time I saw it was on Samsung’s Galaxy S II page and then again when Dell launched the XPS 13 . The effect is amazing, so thank you greatly for giving it some attention and detail. With “everybody doing it” I think it will be cliche fairly soon, but then again, it is the tip of the iceberg and will lead to even greater creativity down the road.

  18. 26

    Wow, what a website. That is so so clever.

    Great article thanks!

  19. 27

    Thats what i called dedication and creativity

  20. 28

    There’s nothing here that can’t be done using HTML4 and Javascript. I am tired of people talking about HTML5 like it’s the best thing since bread came sliced. It’s just markup like any other markup and without Javascript, HTML5 can’t really do anything on its own. The two stars here are Javascript and CSS3. End of.


↑ Back to top