Interactive Room Display

An experimental interactive room slideshow based on the prototype concept by Bilal Mechairia’s Dribbble shot “Spaces”.

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.

Tagged with:

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 27

Comments are closed.
  1. This is one of the most impressive things I’ve seen in a long time.
    Interior decorators having this on their websites would get so much prestige.

    I’m definitely making myself a new toy inspired by this :}

  2. Mary Lou, impressive work. One of the coolest things I saw in the very long time on the web. Very creative and visionary…

  3. This looks like a perfect interface for the new Apple TV. The Gilt app on there is nice, but this would be a fun shopping experience with the parallax effect and the new remote.

  4. This is awesome idea and even greater result, keep up the good work guys, you are doing it at the highest levels.

  5. wow this is great, we have a client who would love this integrated into their new site… shame its so experimental.. maybe in couple years