Interactive Room Display

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.

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

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.

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.

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

• 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.