Dynamic Grid Layout with Awesome Transition Effects

File Size: 42.1 KB
Views Total: 2631
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Dynamic Grid Layout with Awesome Transition Effects

In this post we're going to create a dynamic grid layout that let's you choose how many rows and columns of items are shown. Partly based on the visualization of Google Trends, except that you can add transitions.

How to use it:

1. The HTML

<div class="container demo-3">
<div id="gt-grid-selector" class="gt-grid-control"> <span class="gt-grid-icon"></span>
<div class="gt-grid-select">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>
</div>
<div id="gt-grid" class="gt-grid">
<div>
<h1>Dynamic Grid</h1>
</div>
<div>
<div>
<h3>wakame</h3>
</div>
<div>
<h3>lettuce water</h3>
</div>
<div>
<h3>turnip maize</h3>
</div>
<div>
<h3>bunya nuts</h3>
</div>
<div>
<h3>celery</h3>
</div>
<div>
<h3>greens lotus</h3>
</div>
<div>
<h3>arugula beet</h3>
</div>
<div>
<h3>desert raisin</h3>
</div>
<div>
<h3>mustard burdock</h3>
</div>
<div>
<h3>potato bush</h3>
</div>
<div>
<h3>catsear</h3>
</div>
<div>
<h3>water chestnut</h3>
</div>
<div>
<h3>bok choy</h3>
</div>
<div>
<h3>pea sprouts</h3>
</div>
<div>
<h3>gumbo parsley</h3>
</div>
<div>
<h3>bitterleaf</h3>
</div>
<div>
<h3>spinach rock</h3>
</div>
<div>
<h3>tigernut garlic</h3>
</div>
<div>
<h3>caulie</h3>
</div>
<div>
<h3>seakale</h3>
</div>
</div>
</div>

2. The CSS

@font-face {
font-family: 'minicons-webalys';
src: url('../fonts/minicons-webalys/minicons-webalys.eot');
src: url('../fonts/minicons-webalys/minicons-webalys.eot?#iefix') format('embedded-opentype'),  url('../fonts/minicons-webalys/minicons-webalys.ttf') format('truetype'),  url('../fonts/minicons-webalys/minicons-webalys.svg#minicons-webalys') format('svg'),  url('../fonts/minicons-webalys/minicons-webalys.woff') format('woff');
font-weight: normal;
font-style: normal;
}
/* Grid style; make sure parent containers have full height */
.gt-grid {
width: 100%;
height: 100%;
overflow: hidden;
position: relative;
-webkit-backface-visibility: hidden;
}
.gt-grid > div {
width: 20%;
height: 20%;
float: left;
background-color: #ddd;
position: relative;
opacity: 1;
box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
}
.gt-grid > div:hover:before, .gt-grid > div.special:before {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0,0,0,0.03);
}
.gt-grid > div:hover:before {
background: rgba(0,0,0,0.05);
}
.gt-grid > div.gt-hidden {
opacity: 0;
visibility: hidden;
}
.gt-grid > div.gt-visible {
z-index: 999;
}
/* Some content styles */
.gt-grid > div:first-child {
background-image: url(../images/changeme.png);
background-repeat: no-repeat;
background-position: 45px 10px;
}
.gt-grid > div h1, .gt-grid > div h3 {
position: absolute;
bottom: 0;
left: 0;
margin: 0;
cursor: default;
}
.gt-grid > div h1 {
padding: 0.5em;
line-height: 0.9;
font-weight: 300;
text-align: right;
}
.gt-grid > div h3 {
font-size: 1.05em;
padding: 1em;
font-weight: 700;
text-transform: uppercase;
}
/* The little grid to control the number of items */
.gt-grid-control {
position: fixed;
z-index: 1000;
cursor: pointer;
top: 10px;
left: 10px;
width: 30px;
height: 30px;
}
.gt-grid-icon {
margin: 5px;
display: block;
font-size: 23px;
-webkit-transition: opacity 0.2s;
transition: opacity 0.2s;
}
.gt-grid-icon:before {
font-family: 'minicons-webalys';
font-style: normal;
font-weight: normal;
speak: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
text-shadow: 0 1px 0 rgba(0,0,0,0.1);
content: '\e000';
color: #000;
color: rgba(0,0,0,0.35);
}
.gt-grid-select {
width: 112px;
height: 112px;
position: absolute;
top: 0;
left: 0;
visibility: hidden;
opacity: 0;
-webkit-transition: all 0.2s;
transition: all 0.2s;
border: 1px solid rgba(0,0,0,0.3);
}
.gt-grid-select > div {
width: 22px;
height: 22px;
background: rgba(0,0,0,0.3);
float: left;
border: 1px solid rgba(0,0,0,0.3);
}
.no-touch .gt-grid-control:hover .gt-grid-icon, .gt-grid-control.gt-grid-control-open .gt-grid-icon {
opacity: 0;
}
.no-touch .gt-grid-control:hover .gt-grid-select, .gt-grid-control.gt-grid-control-open .gt-grid-select {
visibility: visible;
opacity: 1;
}
.gt-grid-select .gt-grid-selected {
background: rgba(0,0,0,0.4);
}
.gt-grid-select .gt-grid-hover {
box-shadow: inset 0 0 0 10px rgba(255,255,255,0.1);
}
.demo-3 .gt-grid > div {
background-color: #1abc89;
-webkit-transform: scale(1);
-moz-transform: scale(1);
transform: scale(1);
}
.demo-3 .gt-grid > div.gt-hidden {
-webkit-transform: scale(.6) rotate(45deg);
-moz-transform: scale(.6);
transform: scale(.6);
}

3. Include required javascript library files on the page

<script src="js/classie.js"></script> 
<script src="js/gridSelector.js"></script> 
<script src="js/grid.js"></script> 

4. Initialization

<script>
Grid.init( {
transition : true,
speed : 450,
delay: 20
} );
</script>

This awesome jQuery plugin is developed by MARY LOU. For more Advanced Usages, please check the demo page or visit the official website.