The new Godspell on Broadway website has been nominated for the Awwards CSS Website of the Year 2011 competition. If you get a moment, please vote for us!
Check out the new GODSPELL website! It’s pretty awesome! @georgesalazar
OneSpring collaborated with the amazing marketing team at Davenport Theatrical Entertainment to redesign and implement the first ever Parallax Scrolling website on Broadway.
Parallax is a technique used to create an illusion of 3D space by moving layered objects or images at varying speeds in relation to one another. Although it was originally constructed for the gaming arena, it is a growing trend for web design. With the advancement in HTML5 and CSS, designers can now achieve experiences that were only reserved for Flash projects in years past.
Ok.. The new GODSPELL website RULES! Click on each individual cast member to see footage of their song!! @CelisseMusic
The new GODSPELL parallax site contains several layers of carefully selected and prepared motion graphics each of which moves faster the closer you get to the user. Complex foreground objects, such as the tree in scene one, the taxi in the cast scene and the bus in the subway scene, are designed with detailed transparencies so you can see the main character through the leaves of the tree and through the vehicle windows. The background is a seamless red brick wall that spans the entire piece and contains show information, interesting imagery and several areas of interaction.
If you click on the bios at Godspell.com, you’ll see clips from the show (ie. a snip of me singing ALL GOOD GIFTS). Pretty cool! @tellyleung
“The creative process was an iterative approach, one in which we went back and forth with the GODSPELL marketing team to craft the story of our character who walks through each scene looking at visual and interactive elements on the wall. Most of the objects you see on the wall and sidewalk were taken from actual New York City photos. In conjunction with the creative design we optimized the technology to ensure a smooth experience for each browser and device.” – Mitch Moccia, Senior Web Developer and Parallax Designer
As you scroll down, the main character proceeds from left to right through the urban cityscape and the user can view a video message from Stephen Schwartz, meet the GODSPELL cast, sample hit songs from the show and find an easy way to buy tickets online. Combine all of this with OneSpring’s interactive design best practices, HTML5/CSS3/jQuery parallax code and precisely timed motion graphics and the new GODSPELL parallax site becomes a site worthy of the hottest ticket on Broadway.
Visit www.godspell.com to experience the new website.
Scott McDowell, Chief Innovation Officer for OneSpring says “The GODSPELL story provided us with an assortment of great content and imagery therefore we knew we had to choose a technology that would provide the right medium for delivering the message. A number of factors led us to a horizontal parallax scrolling technique accomplished by using HTML5, this enabled a richer, almost three-dimensional experience that works across multiple browsers and devices.”
