Concept

Inspired from Codrops – Experimental 3D Room Exhibition Layout, but added further more functions! Now you can click every single image to get closer to it, and also available to read description and story behind photos.

Design

Origin post from Codrops is use 3D room as background only, but today I make it more joyful to play around. By separating the .content into .content-top and .content-bottom, we are now able to click on images behind scene! Then, I reuse the .info element with dynamically loading HTML content, so every picture can get its own information written side by side.

Also, I simplify navigation arrows animation to make it less distraction from focusing at gallery, modify color transition to menu icons so get more natural behavior, and add left/right arrow keyboard navigation supported.

On mobile phone, you can even tilt the device to change viewing perspective of room to get more closer to photo you are interested.

Playground