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

View demo Download source

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.

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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://tympanus.net/

Related Articles

Feedback 49

Comments are closed.
  1. 1

    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.

  2. 3

    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? ;)

Comments are closed.