Parallax Scrolling: James Bond

Wednesday 28 November 2012, 12:00

Helene Sears Helene Sears is senior editorial designer for BBC News visual journalism

Tagged with:

My name is Helene Sears and I'm an Editorial Designer for BBC News.

My team produces a huge range of visuals including all of the daily charts, maps and infographics that accompany our online news stories.

We also work on longer interactive features which have ranged from visually explaining the Eurozone crisis to a calculator that tells you where you are on the global pay scale.

Recently developer Steven Atherton and I did a first for BBC News: we created an infographic using parallax scrolling - a technique originally used in 2D video games to create a 3D look and feel.

James Bond: Cars, catchphrases and kisses on BBC News

James Bond: Cars, catchphrases and kisses on BBC News

The subject we chose was a feature about the James Bond movie franchise reaching its 50 year anniversary - not urgent or the highest priority - but a good place to experiment.

The best thing about my job is that we have a fantastic opportunity to try out new approaches and get immediate feedback from our audience.

Designing 'James Bond: Cars, catchphrases and kisses'

Watching our TV designers create motion graphics using After Effects reminded me of parallax scrolling.

Inspired by their work I came up with the idea of building an infographic using this technique which involves multiple layers of visuals programmed to scroll at different speeds.

I wanted to use parallax not because of its popularity but because I felt it would lend itself exceptionally well to the James Bond content.

The motion effect creates the feel of the opening credits and it would also allow me to showcase the epic visuals of the films.

First I built a prototype.

A couple of years ago I worked with Ste Everington, a UX Designer for BBC iPlayer, who had built a parallax site for his own project so I knew it could be done, though my code skills are basic at best.

After reading this tutorial I took parts of the code, redirected it to my images and then did some basic calculations to work out the alignment figures (where the images should go).

I was then able to get a prototype together in Dreamweaver (yes Dreamweaver, I did say my code is basic).

Helene working out the coding for the infographic on Dreamweaver

Helene working out the coding for the infographic on Dreamweaver

It took me less than a day to make something that was strong enough to convey the idea.

Building 'James Bond: Cars, catchphrases and kisses'

Having built my prototype by eyeballing distances, it was fascinating to watch developer Steven Atherton work and build the page mathematically correctly.

The first major stumbling block was interaction of the parallax background with the BBC News page.

The manipulation of the DOM elements gave the impression that the whole page was in parallax.

Sometimes this created odd gaps between images and at others the content would drift up - at one point we had Sean Connery in the masthead.

Then came the next round of challenges: making sure it worked on older browsers - all the way down to IE6, that the EMP (audio clip players) would scale down to 256 pixels wide and that the whole thing would also work on tablets.

Steven's first thought was to create a viewport to contain the parallax, but a few initial experiments showed that while this was technically possible it wasn't a great user experience.

The solution seemed to be controlling the animation speed more precisely and easing the animation early thus hiding unsightly overlaps with the masthead.

To handle adverts or introduction text being inserted we captured the distances dynamically and had the animations interact accordingly.

The animation starts slowly as the user scrolls down the page and speeds-up once the top of the feature hits the top of the users' browser window, eventually stopping altogether when the footer aligns with the bottom of the feature.

It was much easier to make corrections by sitting with Steven and using Firebug as opposed to the much less agile method of sending him annotated images from Illustrator.

Our solution for older browsers and for tablet was to disable the JavaScript and flatten the graphic and for places in the world that can't load the EMP it's simply stripped out.


Helene does some basic calculations to work out the alignment figures

Helene does some basic calculations to work out the alignment figures

When it launched the response was overwhelmingly positive. The vast majority of comments that came in were about how great it was we were using big bold visuals and how much fun the page was.

We did have a couple of comments about the fact it's not on the mobile site and that it's a very heavy page to load at nearly seven megabytes.

The size isn't a huge surprise considering the graphic was 13,000 pixels long - we normally try to stay no deeper than 620 pixels and at the moment all of our content is stripped out of the mobile site. It's a complex problem that we are working hard to resolve.

Meanwhile one of my colleagues in World Service was working on an innovative feature that also pushed the boundaries of the page.

Nour Saab and Steven Conner designed a feature on the importance of the Latino vote in the United States.

The page progressively reveals the content as the user scrolls and its development presented similar challenges to our parallax feature.

It was fantastic to see the evolution of the designs and to have another designer experimenting with code.

Going Forward

Our experiments with parallax scrolling and with other HTML5 techniques are barely scratching the surface.

First and foremost we are about telling the story.

Using parallax scrolling for the Bond feature allowed us to present information in an engaging way that enhances the content without overpowering it and we'll be looking for ways to use this approach again on bigger news stories.

There is much more to be done as more and more of our audience is coming to us via tablets and smart devices which present a whole new set of challenges for us as infographic designers.

This project had the support of the Visual Journalism team, and I'd like to send a big thank you to everyone who helped make it a reality.

Helene Sears is the Editorial Designer for UX&D.

Tagged with:

Comments

Jump to comments pagination
 
  • rate this
    0

    Comment number 1.

    This methodology (without the code) seems to be based on the multi-plane animation camera perfected by Walt Disney Studios animator/director Ub Iwerks in the 1920s.

    "First and foremost we are about telling the story."
    Today's prize for the worst use of English on this site, sorry.

  • rate this
    0

    Comment number 2.

    Bit of an overkill for something I am sure has been done to death already visually, is this really good use of license payer money. What does it offer the viewer?
    Seems odd the BBC building such a project around James Bond, when all the films are exclusive to ITV and Sky.

    You will need to go back to the drawing board, it does not work on tablets, phone or Windows 8 browsers.

  • rate this
    0

    Comment number 3.

    Thanks for the article. It's my understanding that it was not supposed to explain how to add something like that infographic but the idea was rather to show what kind of benefits using that sort of techniques can bring to an online project. And thanks for the edifying links that you gave in your post. Those links can be definitely used to see what miracles can be created with the help of the parallax effect.

 
 

This entry is now closed for comments

Share this page

More Posts

Previous
BBC iPlayer October Performance

Tuesday 27 November 2012, 09:18

Next
What's on BBC Red Button 1 - 8 December

Saturday 1 December 2012, 06:00

About this Blog

Staff from the BBC's online and technology teams talk about BBC Online, BBC iPlayer, BBC Red Button and the BBC's digital and mobile services. The blog is reactively moderated. Your host is Nick Reynolds.

Blog Updates

Stay updated with the latest posts from the blog.

Subscribe using:

What are feeds?

Links about BBC Online

BBC Internet blog Archive

owl-plain-112.jpg 2012 ι 2011 ι 2010 ι 2009 ι 2008 ι 2007

Tags for archived posts