Yellow Submarine Homepage

In June 2012 a digitally restored version of The Beatles film Yellow Submarine was re-issued on BluRay and DVD. To celebrate and promote the release of this groundbreaking animation a new website was developed by Drupology.

Why Drupal was chosen: 

As an agency, Drupology specialise primarily with Drupal. Drupal's stable, secure, and easily extendible framework was our only choice.

Describe the project (goals, requirements and outcome): 

The brief was to create a fun, interactive website utilizing parallax scrolling as a viewport. Drupology developed several Drupal modules and a bespoke theme, as well as writing custom PHP and the jQuery functionality that offers visitors a truly rich and immersive experience.

From the outset, parallax scrolling was chosen to represent the landscape, providing visitors with a rich, three-dimensional feel. Hotspots would be hidden in different layers allowing visitors to explore various aspects of the film. Another key requirement was for content editors to easily add and edit hotspots throughout the different layers of landscape, as well as embed content from providers such as YouTube and Vimeo.

The most challenging part of the project was to create a parallax landscape that could be downloaded in reasonably quick time and function well in different browsers. We spent a good deal of time researching various jQuery plugins that could offer this functionality but after a lot of testing we opted to write the plugin from scratch and extend the jQuery "scroll-to" library.

To achieve the parallax effect we took three layers of images with different pixel widths; the smallest width on the background and the largest on the foreground. The different layers are programmatically scrolled by different amounts as the navigation changes. This gives the illusion of moving through a 3D landscape and is very immersive. These layers are built up from a mixture of PNG, GIF and JPEG to optimise the file sizes. Hotspot images are then embedded within the different layers.

The next technical challenge was to embed the hotspots on each layer. This is much harder than it sounds! If you have a transparent image sitting over another layer, the mouse-clicks are not carried through the transparency. The best way we found to overcome this problem was to create another set of layers which contained just hotspot zones but no images. As the landscape changes the hotspots change to match the images below. All of the hotspots are within the same parent layer so z-indexing is not an issue (apart from in IE6/IE7 of course!).

Content editors can specify the top, left, width, height, image, layer, and content for each pop-up from a simple content template. Views and some clever templating builds each of the layers and hotspots dynamically. Another option on the pop-up content editing is "Promote to the Navigation Bar". If this is selected then a navigation button is added to the submarine navigation block. Again, this is created using Views and templating and the button images will be be sized to fit dynamically with no code changes required.

Sounds were added to enrich the experience. Again, these can be added by content editors using MP3 and OGG formats. Views and templating will output as HTML5 audio which can be triggered depending upon how long it takes the submarine to travel from one part of the landscape to another. Visitors who find this annoying can toggle the sounds on and off.

We developed a few custom modules for the site including the EMI buy button links, File downloads with thumbnails (see the Games section), and a sign-up form for TopSpin (the mailshot provider).

All-in-all this has to be the most fun I've ever had building a website. I think the finished result is amazing and full credit goes to everyone involved.

Organizations involved: 
Modules/Themes/Distributions
Why these modules/theme/distribution were chosen: 

In terms of the Drupal build we used:

  • Drupal 7 core, Fields (File, Image, Text, Number, Media) - used create the pop-up content types on the landscape
  • Field Slideshow - used to present the image slideshows on pop-up nodes
  • Media - manage 3rd party content (YouTube, Vimeo, etc.)
  • Views - build the layered images, hotspots, and submarine navigation
  • Lightbox2 - used to display to pop-ups
  • Page Manager (Chaos Tools Suite) - redirect visitors to the front page should they find their way to pop-up content directly
Team members: 
Project team: 

Jeremy Neech - Motherlode Media Ltd
Lisa Salem
Louisa Filch
Alex Pepper
Subafilms Ltd

Yellow Submarine Landscape
Yellow Submarine Slideshow

Comments

gajanannehul’s picture

excellent work....

bob_otoh’s picture

could you give me some tutorial how to make an parallax effect and submarine navigation using views ? . still i can figured it out

Dubs’s picture

I'm not sure if this was a spammy post, but I'll answer anyway...

If I had more time I would. It would take a long time to write that so sorry I can't do it :-(

The parallax effect is well documented elsewhere but in the end we opted for some bespoke jQuery. You're welcome to pick it apart using Chrome. Views just displays links with absolute positioning and this is standard Views / template overrides. Ditto for the submarine toolbar. That is a bit more clever as it chops the image to fit the number of navigation items.

I hope this helps anyone who may stumble across this. Probably not - I wish I had more time!

bob_otoh’s picture

thanks for the reply, and this is not a spamy. until right now i'm still admire with your beatles art work, and it's inspire me. views module is very helpful and complex for me coz my knowledge about PHP is zero, i'm just know a little bit about HTML and CSS but thanks to drupal now i can make websites.
so do you use another jQuery to make it parallax

skne81’s picture

I agree to you - a german or french translation was very important.

http://www.profischnell.de

mcfilms’s picture

I always enjoy seeing Drupal used on sites that aren't constrained to the header/footer/sidebars design pattern.

A list of some of the Drupal sites I have designed and/or developed can be viewed at motioncity.com

rakibtg’s picture

great contrast design

smallcoder’s picture

Love seeing sites like this which show the power of Drupal to be as creative a canvas as any framework while retaining all the lovely security and robust design in the backend.

Dubs’s picture

Thanks for your comment - it was great fun to do something different with Drupal. We're relaunching the main Beatles website soon in Drupal and that is also very cool and very responsive - can't wait to show that off!

KWang’s picture

A bit too colorful? If there's such thing... nice work though...

Kevin

National Go Solar Foundation - Solar Energy is the Future

Dubs’s picture

Ah, you'll have to complain to the original animators from the 60s ;-)

SteveUrkel’s picture

Wonderful sharing, Thanks lot.. http://dubai.fortuneinnovations.com/

skne81’s picture

Hi there i think for drupal can you programm a translation app.

I think drupal and this page need a translation.

Look here:
http://www.profi-fachuebersetzung.de

diomede’s picture

Hello,
more than one year has passed since the launch of your website.
Design and user interface are usually affected by process of time; it doesn't happen for your website.
Congratulations!

www.concertpass.com - the secure way to buy concert tickets online!