Responsive 3D Panel Layout

A responsive layout experiment where we arrange panels in a grid-like structure and transition the elements with 3D effects.

Responsive 3D Panel Layout

Today we want to share a creative grid layout with you. The layout will contain slides where each one consists of up to four panels. When navigating through them, we’ll animate some separation lines (the “grid”), adjusting the size of the next slide’s panels. The panels will appear with a 3D effect which we will define for each panel.

Please notice that this is very experimental. It will only work as intended in browsers that support the new CSS properties used here. It was tested in the latest versions of Safari, Chrome, Safari Mobile and Firefox (not as smooth though).

Some of the jQuery plugins used for this:

The placeholder text is from Veggie ipsum.

An example for the HTML structure is the following:

<ul id="sg-panel-container">
	<li data-w="60" data-h="55">
		<img title="Grexit" src="images/1.jpg" data-rotate-x="50" />
		<img title="Godwottery" src="images/2.jpg" data-rotate-y="-50" />
		<img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
		<img title="Etiquette" src="images/4.jpg" data-translate-z="250" />
	</li>
	<li data-w="50" data-h="100">
		<img title="Somniloquent" src="images/3.jpg" data-rotate-x="50" data-translate-z="-700" />
		<div>
			<div class="sg-content">
				<h3>Proinde vos postulo</h3>
				<p>Veggies sunt bona vobis, proinde...</p>
			</div>
		</div>
	</li>
	<!-- ... -->
</ul>

The first slide, which is a list item, will contain four images in this example. The data attributes data-w and data-h define the width and height (in percentage) of the first image or element. Since we have a maximum of four items in each li, we know the other panels’ widths and heights by knowing the values of the first one. We can also just add 2 elements, like in the second slide. The values for the width and height should be chosen according to the desired layout of the panels. In this second slide, we say that the first element, which is a picture, will have 50% of width and 100% of height, leaving the rest of the space to the content area.

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


Each element/image can have a data attribute for the transition effect. The following attributes can be used:

  • data-rotate-x
  • data-rotate-y
  • data-rotate-z
  • data-translate-x
  • data-translate-y
  • data-translate-z

The structure that we will create dynamically is the following:

<div class="sg-wrapper">
	
	<div class="sg-box sg-box-1">
		<div class="sg-panel">
			<div style="background-image: url(images/1.jpg);">
				<h2>Grexit</h2>
			</div>
		</div>
	</div>
	
	
	<div class="sg-box sg-box-2" style="width: 40%; height: 55%; left: 60%; ">
		<!-- ... -->
	</div>
	
	<!-- ... -->
	
</div>

Each image or element will be wrapped in a division with the class sg-box. The title of the image becomes an h2 and the image itself will be used as background image of a inner division of the sg-panel division. Additionally, the boxes will have the respective style (width, height, transforms and transitions).

The background images will have the style background-size: cover which will make them cover the whole panel.

To call the plugin, simply do:

$(function() {
			
	$( '#sg-panel-container' ).gridgallery();

});

Don’t forget to include the other scripts that are needed. Check out the files to see how it can be used.

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.

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

👾 Hey! Looking for the latest in frontend? Twice a week, we'll deliver the freshest frontend news, website inspo, cool code demos, videos and UI animations right to your inbox.

Zero fluff, all quality, to make your Mondays and Thursdays more creative!

Feedback 49

Comments are closed.
  1. Mary Lou, you have more creativity and technical ability in your little finger than I have in my whole body, even if I lived three lifetimes.

    This is awesome.

  2. I agree with m4c, the slideshow hangs on Firefox but not always on the same slide change.
    Awesome slideshow.

  3. Often slideshows or image displays can be tacky. You have not only got the coding right but have created a v tasteful, innovative and usable image display. Well done its great.

  4. Your creativity has no limits Mary Lou!

    I could not find information about the licence. Could you please drop me an email and let me know what I can/can’t do with it?

  5. Ms Lou, I tell you that I cannot wait to wake up everyday just to see what you have created. I’m honoured to know some one like you in this life. Thank you for sharing.

  6. Wow! You are the God of stunning things. Can we use this one for commercial stuffs? We will surely credit back to your page. Thanks a lot in advance.

  7. Hi Mary Lou.

    It looks really great.

    I’m viewing this in Firefox (on a Macbook Pro) and the navigation stops working after a few clicks.

    Why is that?

    Regards Thomas

  8. Yes! Yes! Very impressive. But why does it hangup on FireFox? What is it that does not play nice?

    • Hi Ken, thanks! I’m not sure why FF does not play nicely on this one… I’ll have to figure out why those transitions perform badly there… Thanks for the feedback, cheers, ML

  9. you guys are amazing. i’ve learned alot from you guys. sendingyou some love!

  10. Wonderful project. But it still has issues with latest firefox. Any update or fix?

    thanks

  11. Hi, i just want to say! WOW !!! what a nice gallery.

    And also have one question. theres any way to call a especific slide whit a link ?

    Thank you very much

    • Hi, I am also interested in adding a link on the slides. Please let me know to rearrange jquery.gridgallery.js to implement this feature.

      Thanks!

  12. Hi,

    I’m trying to integrate Responsive 3D Panel Layout in your flipboard page layout.
    The panel is displaying in
    Panel is displayed (full screen) on click on a box flipboard but navigation immediately closes the box (on rollOver on sg-dot) and I can not move from slide to slide. Have you got an idea ?

  13. Hi Mary Lou ,

    +1 on making it autoplay ? In such case I would recode it for a screensaver replacement on my xbmc HTPC.

    Thanks
    Toki

  14. Great work! Thank you for sharing 🙂

    I was wondering if there is a way to change navigation dots with navigation links?

    All Best!

  15. I got rid of the Firefox hang by editing line 361 of jquery.gridgallery.js:

    from:
    $wrapper.doTimeout( 1, function() {

    to:
    $wrapper.doTimeout( 50, function() {

    50 is just a small value I tried out. don’t know if it’s a smart solution, but it works.

  16. first of all, really nice stuff.
    i have a problem for using this as i only need the grid lines that adjust according to the size ( scalable) of my divs but the gridgallery.js converts my pages to something i don’t want , so can you please make a tutorial form creating the grid lines according to our needs 🙂
    thank you

  17. Having trouble with information panels… do not scroll on mobile web browser even with overflow-y: scroll;

    suggestions?

  18. This slideshow is probably the best, anyway, I’m trying to figure out how to handle keyboard events ? Some body could help me ?

    Thank’s

  19. Hi, i’m using the gallery but in one case i want only to show one , but in that case dont load the first (only li in that case)…

  20. Does anyone else have a problem using this with Internet Explorer? Some of my images don’t load and I’m just left with a black background. They work fine in Chrome, though.

  21. Firefox 20 crashed (or at least took an indefinite pause) half way through using the slideshow. Also I’ve noticed that IE10 takes an age to complete download of a complicated, heavily laiden javascript page (ie Facebook).

    Maybe we should all go back to HTML3.2? 😉