From our sponsor: Get suggestions for improving your content, targeting, and marketing automations to help you increase revenue.
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.
transform-style: preserve-3dis not supported.
Being a proof-of-concept, this implementation is highly experimental and there’s no fallback for browsers that don’t support
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.
- Internet ExplorerNot supported
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.
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 :}
Guys, you’re amazing. That’s.
so awesome you Mary always blow my mind
Woww: impressive !
Mary Lou, impressive work. One of the coolest things I saw in the very long time on the web. Very creative and visionary…
So 3D, good job \m/
This is really amazing. Always top quality, keep it up 🙂
Idea: Use the gyroscope sensor in your smartphone to have the effect.
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.
As always, very impressive !
This is awesome idea and even greater result, keep up the good work guys, you are doing it at the highest levels.
Great feature as always!
+1 for the bidet =)
Wow… Truly refreshing. Great idea 😀
You are awesome. Just amazing!!
Absolutely stunning ..Great Concept
You just awesome…….I always love your work…. 🙂
??? ??????? ????? ?? ????? png?
How then do this png?
Would definitely buy if someone integrates this to wordpress
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
how can i run this autoplay??