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 […]

View demoDownload source

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!

View demoDownload source

Previous:
Next:

Tagged with:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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

    _ wow _
    ben almen’s plugin – waitng for mini site in which hasher and ajax will b used with inner pages and sections like flash 🙂

    maya lou can do it for us 🙂
    thanks

  2. 10

    As for me, it’s the most beautiful pictures gallery that I’ve ever seen. But I encountered another problem – if I add in this gallery more than 21 image, the gallery will not work.
    Please help me solve this problem.
    how I can add an unlimited number of images?

    thanks

    • 14

      Thank you for the screenshot Ralph, I have no idea why it looks like that. I have the same version on Windows and it looks and works fine. Did you download the zip and try it locally? The perspective only comes into play once you start scrolling but this seems to be another problem… Cheers, ML

  3. 15

    Hey Mary great stuff again!

    Would you mind if I use some of your tutorials to create video tutorials about your sliders and the MODx CMS. I will place links of course.

    I would like to show a gallery, add it to MODx CMS and show how to make it manageable on the back-end of the CMS using Template variables.

    You can see my latest video (as an example) here:
    http://designfromwithin.com/video-tutorial-basic-modx-template-setup/

  4. 17

    “Did you download the zip and try it locally?”

    Yes, I did and tested it, but the same result.

  5. 18

    Seeing Ralphs screenshot I had to say: Same system, same effect. Looks the same to me on my “old” Mac. Online demo or local version. Doesn’t matter.
    So I dig out my even older windows based notebook and made a fresh install of Safari 5.0.3. And it works! But it is no real fun on a 1.6GHz Pentium M laptop. Seems to be too slow. Effect is struggeling.

    But its an experiment of course, and still a nice tech demo. Keep up the good work!

  6. 20

    @Mary Lou

    for me…

    – Mac, Safari 5.0.1, the 3-D effect does not work, but everything else works.

    – PC, Safari 5.0.2, everything works.

  7. 21

    Thanks for this wonderful wall

    Works fine with (OS PC)
    firefox 3.6.13
    ie 8.0
    chrome 9.0
    safari 5.0.3

    …even in a popup !

  8. 23

    Oops, should specify that the demo itself isn’t working for me, or at least, the 3-D part of the demo. It does gracefully fall back to 2-D though.

Comments are closed.