Hotel Transylvania Webpage

Hotel Transylvania Webpage
Are you an Indie book author who wishes to get the word out about your new book or book app? Take a look at how the pros do it. Let’s take a look at the Columbia PicturesR website for Hotel TransylvaniaTM. The movie has been out less than a year but long enough that most of the advertising is in place.

On the website dedicated to the movie, the front page contains a large graphic of the characters, with the title in the recognizable Hotel Transylvania font. Once the splash page makes an impression, you notice the Enter The Site box in the upper right corner. This box has a link to open a overlay for viewing the movie’s trailers, a link to the movie’s Tumblr site and link to a list of release dates.

Entering the FlashR based interactive site, we first see a bat animation which is not only a countdown preloader but also a mouse trailer. Once the first page of the site is loaded, we see a short clip from the movie followed by a full-screen graphic of the main characters and a top menu with links to the other pages including Story, Cast and Crew, Videos, Gallery, Downloads, Games and an icon to turn off the audio, which is tiring after the first few minutes of the background music.

This interactive page pans slightly right or left in response to your mouse, a very easy but popular technique. Although the characters in the image do not move, the gas lights in the background flicker randomly. As you mouse over the static characters, a short animation reveals a parchment scroll with the character’s bio and a clickable icon to hear the character’s voice.

Mavis, one of the characters, is holding a map. When clicked, this opens an overlay image of the castle which has a mouse triggered 3D rotation animation and a few bouncing lights. When you mouse over a light, you see a popup tip with the name of the locations, which match the links in the main menu such as The Graveyard, Games, Gallery, Downloads, Story, Cast and Crew and Video. When clicked, a new page is loaded.

Finally, there is a simple Find the Griffins game score board, with simple instructions to find Griffin's glasses on each page. When you do, your score is updated.

Note: You will want to view the website using your computer, instead of your mobile device, to see all the features.

Now that we have seen the splash page in action, continue to an animation analysis of the page.

Next →

Related Articles
Editor's Picks Articles
Top Ten Articles
Previous Features
Site Map

Content copyright © 2022 by Diane Cipollo. All rights reserved.
This content was written by Diane Cipollo. If you wish to use this content in any manner, you need written permission. Contact Diane Cipollo for details.