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

By Manoela Ilic in Playground on
Demo Download

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

Tiny break: 📬 Want to stay up to date with frontend and trends in web design? Subscribe and get our Collective newsletter twice a tweek.


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!

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.

Custom SVG Cursors with an Interactive Emitter Effect

Preview to Full Content Page Transition

Slideshow with Filter Reveal Effect

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

Feedback 50

Comments are closed.

  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

  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

    • 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

  13. 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/

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

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

  15. 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!

  17. @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.

  18. 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 !

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

  22. Jesus, I hate all these buggy and extremely slow rendering CSS3 demos. People keep saying CSS3 is the replacement for Flash, but all the demos fall short of basic usability. Flash is a medium that has been designed for years to provide a smooth frame rate on any platform. These CSS3 animations imply that the people building you browser now need to be experts in graphics programming as well. Maybe that’s where the problem is. Regardless, if you want any kind of “3d” image manipulation, I say stick with Flash.

  24. I really like this.

    When you click on the right side of the screen i.e to view the next picture, it slides across perfectly. Can anyone make it do it the other way (back) I just like the simplicity of it sliding from left to write by clicking on the image, not the slider or thumbs. I’d be really greatfull if someone could help. Pretty new to this.

    Tom

  27. Very nice work.
    Sorrily it’s behavior depend on the current path of the url, so in portals which have dummy addresses in the url, it simply does not work 🙁

  28. Hi Mary Lou,

    Very nice work , but i just installed internet explorer 9 and doesn’t work.
    How can I fix the problem?
    thx a lot

  29. Hi Stero, I fixed it and it should work properly in IE9 now. It’s the jQuery version, it just needs to be updated to the current one (1.5.2).
    Thank you,
    cheers,
    ML

  30. Hi Mary Lou, I have fixed in IE9, but how can avoid that the gallery strech out when I minimize the browser?

    thanks a lot

  31. Hi Mary
    I have a problem with IE8.
    If I put the zoom at 125%, the last image of the gallery jump to a 2º line and broke the layout.
    Can you tell me what I must do to fix this problem.
    Regards

  33. Does this example provide loading function? I found there is loading triggered in another example(sweetthumbnail)

    I try to use this script to find the image but it return length=0.

    var loaded = 0;
    $nav_elems.each(function(i){
    var $nav_elems = $(this);
    if (loaded==0)
    alert($($nav_elems.find(‘a’)).find(‘img’).length);
    loaded++;
    });

  34. Hi there, excellent looking gallery! I seem to have stumbled upon a javascript conflict with regards to a Statcounter script. Once inserting the webstats script, a message appears in the gallery that the code is corrupted. Is there a way to avoid the conflict?

    Cheers,
    Dave

  35. Hi Mary Lou,

    Really great script. This is just what I’ve been looking for, for some time now!

    My question is: Can you have the slider align to a DIV rather than the BODY – I have a left-margin of 200px – the slider seems to overide the CSS and go to absolute 0 left.
    Any ideas?

    Your help would be very much appreciated.
    Thanks,
    Chris

  36. I absolutely love this gallery. However, I noticed that the iPad doesn’t. Is there any way to make this work in the iPad?
    Thanks again for a great tutorial.

  37. it’s wonderful! very nice. it wil be perfect using ajax dynamic loading the picture

  41. Hello,

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

    Thanks.

  43. Hi Mary & everybody,

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

    Thanks.

  44. Hi Mary Lou,

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

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

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

    Al hail the open web!