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:

• jQuery Transit for most of the CSS transitions
• Modernizr for checking browser support of the CSS properties

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.