Interactive Room Display

An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia's Dribbble shot "Spaces".

RoomDisplay800x600

View demo Download source

Today we’d like to share a little experiment based on a Dribbble shot by Bilal Mechairia’s, called “Spaces”. The idea is to show an interactive room with several items that all float in 3D space and move according to the position of the mouse. Once an item is clicked, more details pop up. Navigating between the room “slides” will rotate the different wall sections and add some interesting dynamic to the whole thing.

Attention: Some of the CSS properties, like 3D related ones, only work in modern browsers. It won’t work in IE where transform-style: preserve-3d is not supported.

Being a proof-of-concept, this implementation is highly experimental and there’s no fallback for browsers that don’t support preserve-3d.

RoomDisplay_01

Implementing such a 3D based component is quite tricky if one aims to go all the way and make everything “real 3D”. When we inspected the whole idea, it soon became clear that we can actually “fake” the perspective part of the room by cutting out the images and dividing them where we have a clean cut wall. Like that it was possible to rotate the pieces and make it look more 3D-like.

RoomDisplay_02

We basically did a slideshow where each slide is comprised of two or more sections that have the respective wall image. Then we added some items which are clickable and which expand with some more information. The slides are then animated by adding an animation class. This will trigger the slides to move and also the inner parts to do some rotation in 3D, creating a bit of depth. The whole scene rotates a bit as well when we move the mouse.

RoomDisplay_03

For the mobile, we’ve simply reduced the view to a listing of all items with the help of some media queries.

RoomDisplay_04

Browser Support:
  • ChromeSupported
  • FirefoxSupported
  • Internet ExplorerNot supported
  • SafariSupported
  • OperaSupported

We hope you enjoy this little experiment and find it useful!

Featured image mockup and iPhone mockup from PixelBuddha, MadeByVadim and designed by Vadim Scherbakov: iMac Mockup, iPhone Mockup.

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 24

Follow this discussion

Leave a Comment

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>