Responsive Fullscreen Layout with Fancy Page Transitions - Box Layout

Responsive Fullscreen Layout with Fancy Page Transitions - Box Layout
File Size: 319KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Box Layout is a lightweight jQuery plugin that enables you to create responsive and touch-friendly fullscreen grid layout with fancy CSS3 transitions effects. This responsive layout is based on an initial grid of four boxes. Once a box is clicked, it gets resized to fullscreen and the other boxes scale down and fade out. Please check the demo page and resize the browser window to see it in action.

You might also like:

How to use it:

1. Include jQuery library and Box Layout plugin on the page

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
<script src="js/boxlayout.js"></script>

2. Markup html structure

<div id="bl-main" class="bl-main">

<section>
<div class="bl-box">
Box 1 Title
</div>
<div class="bl-content">
Box 1 content
</div>
<span class="bl-icon bl-icon-close"></span> 
</section>

<section id="bl-work-section">
<div class="bl-box">
Box 2 Title
</div>
<div class="bl-content">
Box 2 Content
</div>
<span class="bl-icon bl-icon-close"></span> 
</section>

<section>
<div class="bl-box">
Box 3 Title
</div>
<div class="bl-content">
Box 3 Content
</div>
<span class="bl-icon bl-icon-close"></span> 
</section>

<section>
<div class="bl-box">
Box 4 Title
</div>
<div class="bl-content">
Box 4 Content
</div>
<span class="bl-icon bl-icon-close"></span> 
</section>

</div>

3. The CSS. You can customize your grid layout in this CSS file

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700);
@font-face {
font-family: 'icomoon';
src: url('../fonts/icomoon.eot');
src: url('../fonts/icomoon.eot?#iefix') format('embedded-opentype'),  url('../fonts/icomoon.woff') format('woff'),  url('../fonts/icomoon.ttf') format('truetype'),  url('../fonts/icomoon.svg#icomoon') format('svg');
font-weight: normal;
font-style: normal;
}
body, html {
font-size: 100%;
padding: 0;
margin: 0;
height: 100%;
}
*, *:after, *:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: 'Lato', Calibri, Arial, sans-serif;
color: #f2ede3;
background: #333;
font-size: 0.9em;
font-weight: 300;
}
a {
color: #f0f0f0;
text-decoration: none;
font-weight: 700;
letter-spacing: 2px;
padding: 0 5px;
text-transform: uppercase;
font-size: 80%;
}
a:hover {
color: #fff;
}
.container {
height: 100%;
}
.bl-main {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.bl-main > section {
position: absolute;
width: 50%;
height: 50%;
}
.bl-main > section:first-child {
top: 0;
left: 0;
background: #F06060;
}
.bl-main > section:nth-child(2) {
top: 0;
left: 50%;
background: #FA987D;
}
.bl-main > section:nth-child(3) {
top: 50%;
left: 0;
background: #72CCA7;
}
.bl-main > section:nth-child(4) {
top: 50%;
left: 50%;
background: #10A296;
}
.bl-box {
position: relative;
width: 100%;
height: 100%;
cursor: pointer;
opacity: 1;
/* Centering with flexbox */
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-moz-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-moz-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
}
.bl-box h2 {
text-align: center;
margin: 0;
padding: 20px;
width: 100%;
font-size: 1.8em;
letter-spacing: 2px;
font-weight: 700;
text-transform: uppercase;
}
.bl-icon {
font-family: 'icomoon';
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
cursor: pointer;
-webkit-font-smoothing: antialiased;
}
.bl-icon:before {
display: block;
font-size: 2em;
margin-bottom: 10px;
}
.bl-icon-about:before {
content: "\e000";
}
.bl-icon-works:before {
content: "\e001";
}
.bl-icon-blog:before {
content: "\e002";
}
.bl-icon-contact:before {
content: "\e003";
}
.bl-main > section .bl-icon-close {
position: absolute;
top: 20px;
right: 20px;
cursor: pointer;
z-index: 100;
opacity: 0;
pointer-events: none;
}
.bl-icon-close:before {
content: "\e005";
}
.bl-content, div.bl-panel-items > div > div {
opacity: 0;
pointer-events: none;
position: absolute;
top: 60px;
left: 30px;
right: 30px;
bottom: 30px;
padding: 0 20px;
overflow: hidden;
overflow-y: auto;
}
/* Custom content */

.bl-content p {
margin: 0 auto;
padding-bottom: 15px;
font-size: 1.7em;
line-height: 1.8;
}
.bl-content h2 {
font-size: 3em;
font-weight: 300;
margin: 0 0 20px 0;
}
.bl-content article {
padding: 20px 40px 20px 0px;
}
.bl-content article h3 {
font-weight: 700;
letter-spacing: 2px;
text-transform: uppercase;
margin: 0 0 10px 0;
padding-top: 20px;
font-size: 1.4em;
}
.bl-content article a {
color: rgba(0,0,0,0.2);
}
.bl-content > ul {
list-style: none;
padding: 0;
margin: 0;
}
.bl-content > ul li {
display: inline-block;
width: 20%;
margin: 1%;
}
.bl-content > ul li a {
display: block;
padding: 0;
border: 8px solid rgba(0,0,0,0.1);
}
.bl-content > ul li a img {
display: block;
max-width: 100%;
}
/* Panel Items */

div.bl-panel-items, div.bl-panel-items > div {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
}
div.bl-panel-items > div > div {
width: 60%;
margin: 0 auto;
opacity: 1;
bottom: 90px;
top: 90px;
pointer-events: auto;
}
div.bl-panel-items > div > div h3 {
font-size: 2.4em;
font-weight: 300;
margin: 0 0 20px 0;
}
div.bl-panel-items > div > div p {
font-size: 1.3em;
}
div.bl-panel-items > div > div img {
float: left;
margin: 0 20px 20px 0;
max-width: 100%;
}
div.bl-panel-items {
top: 100%;
z-index: 9999;
}
div.bl-panel-items > div {
background: #3ba5db;
z-index: 0;
opacity: 0;
-webkit-transform: translateY(0);
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-moz-transform: translateY(0);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0s linear 0.5s;
transform: translateY(0);
transition: transform 0.5s ease-in-out, opacity 0s linear 0.5s;
-ms-transform: translateY(0);
}
div.bl-panel-items nav {
position: absolute;
z-index: 9999;
width: 216px;
left: 50%;
top: 0px;
margin-left: -108px;
opacity: 0;
-webkit-transition: opacity 0.2s ease-in-out 0.5s;
-moz-transition: opacity 0.2s ease-in-out 0.5s;
transition: opacity 0.2s ease-in-out 0.5s;
}
div.bl-panel-items.bl-panel-items-show nav span {
float: left;
margin: 5px;
}
div.bl-panel-items nav span.bl-next-work {
font-weight: 700;
letter-spacing: 2px;
display: block;
text-transform: uppercase;
line-height: 2em;
cursor: pointer;
margin-right: 2em;
}
div.bl-panel-items.bl-panel-items-show nav {
opacity: 1;
top: -70px;
}
div.bl-panel-items > div.bl-show-work {
z-index: 1000;
opacity: 1;
-webkit-transform: translateY(-100%);
-webkit-transition: -webkit-transform 0.5s ease-in-out;
-moz-transform: translateY(-100%);
-moz-transition: -moz-transform 0.5s ease-in-out;
transform: translateY(-100%);
transition: transform 0.5s ease-in-out;
-ms-transform: translateY(-100%);
}
div.bl-panel-items > div.bl-hide-current-work {
opacity: 0;
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translateY(-100%) scale(0.5);
-moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-moz-transform: translateY(-100%) scale(0.5);
transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
transform: translateY(-100%) scale(0.5);
-ms-transform: translateY(-100%) scale(0.5);
z-index: 0;
}
/* Transition classes and properties */
/* Separated for a better overview and control */

.bl-main > section {
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
.bl-main > section.bl-expand {
width: 100%;
height: 100%;
top: 0;
left: 0;
}
.bl-main > section.bl-expand-top {
z-index: 100;
}
.bl-main > section:first-child.bl-expand {
background: #EE4444;
}
.bl-main > section:nth-child(2).bl-expand {
background: #F98262;
}
.bl-main > section:nth-child(3).bl-expand {
background: #4BBE8E;
}
.bl-main > section:nth-child(4).bl-expand {
background: #0D8278;
}
.bl-main.bl-expand-item > section:not(.bl-expand), .bl-main.bl-expand-item > section.bl-scale-down {
-webkit-transform: scale(0.5);
-moz-transform: scale(0.5);
-ms-transform: scale(0.5);
transform: scale(0.5);
opacity: 0;
}
.bl-box {
-webkit-transition: opacity 0.2s linear 0.5s;
-moz-transition: opacity 0.2s linear 0.5s;
transition: opacity 0.2s linear 0.5s;
}
section.bl-expand .bl-box {
opacity: 0;
-webkit-transition: opacity 0s linear;
-moz-transition: opacity 0s linear;
transition: opacity 0s linear;
}
.bl-box h2 {
-webkit-transition: all 0.2s ease-in-out;
-moz-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.no-touch section:not(.bl-expand) .bl-box:hover h2 {
-webkit-transform: translateY(-15px);
-moz-transform: translateY(-15px);
-ms-transform: translateY(-15px);
transform: translateY(-15px);
}
.bl-content, .bl-icon-close {
-webkit-transition: opacity 0.1s linear 0s;
-moz-transition: opacity 0.1s linear 0s;
transition: opacity 0.1s linear 0s;
}
section.bl-expand .bl-content, section.bl-expand .bl-icon-close {
pointer-events: auto;
opacity: 1;
-webkit-transition: opacity 0.3s linear 0.5s;
-moz-transition: opacity 0.3s linear 0.5s;
transition: opacity 0.3s linear 0.5s;
}
 @media screen and (max-width: 46.5em) {
.bl-content,  .bl-box {
font-size: 75%;
}
.bl-expand .bl-box {
height: 130px;
}
.bl-content > ul li {
width: 40%;
}
}

4. Initialize the plugin

<script>
$(function() {
	Boxlayout.init();
});
</script>

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