Can You Be My Hero... Image?

There have been many websites that have embraced the Hero Image on their homepage. One of the most prolific companies to use this technique is Apple. Apple uses large product imagery on their home page with minimal text to highlight products. It creates a strikingly beautiful and clean showcase of what the company currently has on offer. This type of user experience is fantastic but this is currently limited to a static image. What can a developer do with a Hero Image to make it a more interactive and captivating experience?

Apple.com Home Page with Hero Image

As a web developer, there are many new technologies that are at your disposal to create some great "magic" for a client. Since the dawn of HTML5, web developers have been given access to features that were never available before. One of these is access to a mobile device's accelerometer and gyroscope. These two features give us access to how the user is viewing the content and at what angle they are holding their device. Since web developers can now access this type of information, how can we use it to enhance a website? That answer is simple.

Since we can determine the way the user is holding their phone and at the angle they are viewing the content, can't we add an extra dimension to a website and add visual trickery to create a more immersive experience? We have three items that we can play with. There is a Hero Image and the angle and view of the user. The next step is to add depth to make it a more engaging experience.

By breaking the Hero Image into various individual items, such as background, buttons, text and imager, we can add visual depth and layer these items on top of each other. Using some clever mathematics, we can then shift these layers based on the information we receive from the Gyroscope and Accelerometer to give the user the perception that their content has shifted in perspective and that can give our Hero Image some real interactive effects. This could lead to some very interesting developments into how we create some really great content and be ahead of our game.

I cant wait to try this out on a client website.