Skip directly to content

Yellow Submarine

Award Category 
Drupal Version 
Brief Overview 

Come on...it's The Beatles. The site has a very unique yet expected "Beatles" feel unlike any other. Very colorful and interactive content.

Launch or Publication Date 
Wednesday, January 23, 2013
Yellow Submarine
Key Modules, Theme, and Distribution Used 
Core 7 Chaos tool suite (ctools) Field Slideshow Media Media: Vimeo Media: YouTube Lightbox2 Views
Why these Modules, Theme, and 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
Owner's Name 
Yellow Submarine
Development Company 
Drupology
Drupology™ design and develop some of the leading UK Drupal websites, providing a full-spectrum of Drupal services to organisations at home and worldwide. Drupology™ have worked with Drupal since 2007 and continue to actively push and promote this exciting platform. Drupology boasts a portfolio of high-profile clients including Apple Records, The Beatles, Waveloch LLC, Hoya Vision Care, First Utility, Scottish Water, What House and many more. We are active contributors to the Drupal project, have an organisational membership with the Drupal association as well as being an approved vendor for Drupal services, and an official Acquia partner.
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.

 

Type of Nomination 
Website