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

From our sponsor: Don't spend all day sending messages. Automatically reach out to fans based on how they behave.

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.


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.

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

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