Parallax Scrolling: James Bond
Post categories: innovation,Ìýuser experience & design
| 12:00 UK time, Wednesday, 28 November 2012
My name is Helene Sears and I'm an Editorial Designer for 91Èȱ¬ 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 91Èȱ¬ News: we created an infographic using - a technique originally used in 2D video games to create a 3D look and feel.
James Bond: Cars, catchphrases and kisses on 91Èȱ¬ News
The subject we chose was a feature about the 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 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 91Èȱ¬ 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 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 (yes Dreamweaver, I did say my code is basic).
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 91Èȱ¬ News page.
The manipulation of the 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 , 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 as opposed to the much less agile method of sending him annotated images from .
Our solution for older browsers and for tablet was to disable the 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
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.
Comment number 1.
At 28th Nov 2012, Kit Green wrote: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.
Complain about this comment (Comment number 1)
Comment number 2.
At 29th Nov 2012, lettice wrote: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 91Èȱ¬ 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.
Complain about this comment (Comment number 2)
Comment number 3.
At 29th Nov 2012, Kenneth von Rauch wrote: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.
Complain about this comment (Comment number 3)