3D Wall Gallery

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality. For seeing the 3D effect, please try […]
By in Playground on
3dwallgallery
View demo Download Source

From our sponsor: Reach inboxes when it matters most. Instantly deliver transactional emails to your customers.

Today we want to share our latest experiment with you: the 3D Wall Gallery. Using the Safari browser the images of this gallery will be put into 3D perspective, when scrolling or sliding. When viewed with another browser, the gallery will be shown normally, retaining all the functionality.

For seeing the 3D effect, please try the demo in Safari.

Summarized, you can do the following things in this gallery:

  • Hover an image to see a description
  • Slide through the images using the jQuery UI Slider at the top
  • Use the mouse wheel to scroll through the images
  • Use the thumbnail previewer at the bottom to choose an image
  • Use the hash anchor for the image in the URL to get to it directly
  • Click on an image to slide it to the left (notice the hash anchor in the URL)
  • Turn it into a 3D wall when scrolling/sliding (Safari users)
  • Flipping the perspective when changing the slide/scroll direction (Safari users)

We are using the jQuery hash change plugin by Ben Alman:
jQuery Hashchange Plugin

And we are also using the jQuery Mousewheel Plugin by Brandon Aaron:
jQuery Mousewheel Plugin

The beautiful photography is by Alan Antiporda from Illusive Photography and you can find his Flickr Photostream here: Illusive Photography Photostream


When viewed in the Safari browser, you will see the perspective happening while scrolling or sliding. When changing the direction of scrolling, you will notice that the perspective will tilt to the other side.


You can navigate through the images by either using the jQuery UI slider at the top or your mousewheel.


You can also use the thumbnails previewer to click on an image and get to it directly.


When hovering over an image you can see a little description at the top.

We hope that you enjoy our little experiment and find it useful!

Tagged with:

Mary Lou

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

http://www.codrops.com

MeshLines_Featured

Animated Mesh Lines

InteractiveParticles_featured

Interactive Particles with Three.js

Blurry_featured

Simulating Depth of Field with Particles using the Blurry Library

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

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 50

Comments are closed.

  1. Hello,

    I would like to have next and previous arrow for thumbnails navigation ? Is there any easy way to achieve it ?

    Thanks.

  3. Hi Mary & everybody,

    Is there any way to add categories to this beautiful gallery.

    Thanks.

  4. Hi Mary Lou,

    Would you know how I could add a left and right arrow to navigate through the pictures?

  6. HELLO,

    I put it in 2 but when i scroll to the end i get a empty page whit just 1 photo dos any body nows how i get the scroll stop at the end of the last photo

    Greetings Danko

  7. that was awesome! shows that there’s no longer need in Adobe Flash player! HTML 5 done everything 😉

    Al hail the open web!