Expanding Column Layout
A resposive expanding column layout to present projects, articles, and more.
<section class="strips"> | |
<article class="strips__strip"> | |
<div class="strip__content"> | |
<h1 class="strip__title" data-name="Lorem">Awesome</h1> | |
<div class="strip__inner-text"> | |
<h2>Ettrics</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p> | |
<p> | |
<a href="https://twitter.com/ettrics" target="_blank"><i class="fa fa-twitter"></i></a> | |
</p> | |
</div> | |
</div> | |
</article> | |
<article class="strips__strip"> | |
<div class="strip__content"> | |
<h1 class="strip__title" data-name="Ipsum">Words</h1> | |
<div class="strip__inner-text"> | |
<h2>Ettrics</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p> | |
<p> | |
<a href="https://twitter.com/ettrics" target="_blank"><i class="fa fa-twitter"></i></a> | |
</p> | |
</div> | |
</div> | |
</article> | |
<article class="strips__strip"> | |
<div class="strip__content"> | |
<h1 class="strip__title" data-name="Dolor">Go</h1> | |
<div class="strip__inner-text"> | |
<h2>Ettrics</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p> | |
<p> | |
<a href="https://twitter.com/ettrics" target="_blank"><i class="fa fa-twitter"></i></a> | |
</p> | |
</div> | |
</div> | |
</article> | |
<article class="strips__strip"> | |
<div class="strip__content"> | |
<h1 class="strip__title" data-name="Sit">Inside</h1> | |
<div class="strip__inner-text"> | |
<h2>Ettrics</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p> | |
<p> | |
<a href="https://twitter.com/ettrics" target="_blank"><i class="fa fa-twitter"></i></a> | |
</p> | |
</div> | |
</div> | |
</article> | |
<article class="strips__strip"> | |
<div class="strip__content"> | |
<h1 class="strip__title" data-name="Amet">Here</h1> | |
<div class="strip__inner-text"> | |
<h2>Ettrics</h2> | |
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia sapiente deserunt consectetur, quod reiciendis corrupti quo ea aliquid! Repellendus numquam quo, voluptate. Suscipit soluta omnis quibusdam facilis, illo voluptates odit!</p> | |
<p> | |
<a href="https://twitter.com/ettrics" target="_blank"><i class="fa fa-twitter"></i></a> | |
</p> | |
</div> | |
</div> | |
</article> | |
<i class="fa fa-close strip__close"></i> | |
</section> |
var Expand = (function() { | |
var tile = $('.strips__strip'); | |
var tileLink = $('.strips__strip > .strip__content'); | |
var tileText = tileLink.find('.strip__inner-text'); | |
var stripClose = $('.strip__close'); | |
var expanded = false; | |
var open = function() { | |
var tile = $(this).parent(); | |
if (!expanded) { | |
tile.addClass('strips__strip--expanded'); | |
// add delay to inner text | |
tileText.css('transition', 'all .5s .3s cubic-bezier(0.23, 1, 0.32, 1)'); | |
stripClose.addClass('strip__close--show'); | |
stripClose.css('transition', 'all .6s 1s cubic-bezier(0.23, 1, 0.32, 1)'); | |
expanded = true; | |
} | |
}; | |
var close = function() { | |
if (expanded) { | |
tile.removeClass('strips__strip--expanded'); | |
// remove delay from inner text | |
tileText.css('transition', 'all 0.15s 0 cubic-bezier(0.23, 1, 0.32, 1)'); | |
stripClose.removeClass('strip__close--show'); | |
stripClose.css('transition', 'all 0.2s 0s cubic-bezier(0.23, 1, 0.32, 1)') | |
expanded = false; | |
} | |
} | |
var bindActions = function() { | |
tileLink.on('click', open); | |
stripClose.on('click', close); | |
}; | |
var init = function() { | |
bindActions(); | |
}; | |
return { | |
init: init | |
}; | |
}()); | |
Expand.init(); |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
$color1: #244F75; | |
$color2: #60BFBF; | |
$color3: #8C4B7E; | |
$color4: #F8BB44; | |
$color5: #F24B4B; | |
@mixin easeOut { | |
transition: all .6s cubic-bezier(0.23, 1, 0.32, 1); | |
} | |
@mixin break { | |
@media screen and (max-width: 760px) { | |
@content; | |
} | |
} | |
* { | |
box-sizing: border-box; | |
} | |
.strips { | |
min-height: 100vh; | |
text-align: center; | |
overflow: hidden; | |
color: white; | |
&__strip { | |
will-change: width, left, z-index, height; | |
position: absolute; | |
width: 20%; | |
min-height: 100vh; | |
overflow: hidden; | |
cursor: pointer; | |
@include easeOut; | |
&:nth-child(1) { | |
left: 0; | |
} | |
&:nth-child(2) { | |
left: 20vw; | |
} | |
&:nth-child(3) { | |
left: 40vw; | |
} | |
&:nth-child(4) { | |
left: 60vw; | |
} | |
&:nth-child(5) { | |
left: 80vw; | |
} | |
&:nth-child(1) { | |
.strip__content { | |
background: $color1; | |
transform: translate3d(-100%, 0, 0); | |
animation-name: strip1; | |
animation-delay: 0.1s; | |
} | |
} | |
&:nth-child(2) { | |
.strip__content { | |
background: $color2; | |
transform: translate3d(0, 100%, 0); | |
animation-name: strip2; | |
animation-delay: 0.2s; | |
} | |
} | |
&:nth-child(3) { | |
.strip__content { | |
background: $color3; | |
transform: translate3d(0, -100%, 0); | |
animation-name: strip3; | |
animation-delay: 0.3s; | |
} | |
} | |
&:nth-child(4) { | |
.strip__content { | |
background: $color4; | |
transform: translate3d(0, 100%, 0); | |
animation-name: strip4; | |
animation-delay: 0.4s; | |
} | |
} | |
&:nth-child(5) { | |
.strip__content { | |
background: $color5; | |
transform: translate3d(100%, 0, 0); | |
animation-name: strip5; | |
animation-delay: 0.5s; | |
} | |
} | |
@include break { | |
min-height: 20vh; | |
&:nth-child(1) { | |
top: 0; | |
left: 0; | |
width: 100%; | |
} | |
&:nth-child(2) { | |
top: 20vh; | |
left: 0; | |
width: 100%; | |
} | |
&:nth-child(3) { | |
top: 40vh; | |
left: 0; | |
width: 100%; | |
} | |
&:nth-child(4) { | |
top: 60vh; | |
left: 0; | |
width: 100%; | |
} | |
&:nth-child(5) { | |
top: 80vh; | |
left: 0; | |
width: 100%; | |
} | |
} | |
} | |
.strip__content { | |
animation-duration: 1s; | |
animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1); | |
animation-fill-mode: both; | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
position: absolute; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
text-decoration: none; | |
&:hover { | |
&:before { | |
transform: skew(-30deg) scale(3) translate(0, 0); | |
opacity: 0.1; | |
} | |
} | |
&:before { | |
content: ""; | |
position: absolute; | |
z-index: 1; | |
top: 0; | |
left: 0; | |
width: 100%; | |
height: 100%; | |
background: white; | |
opacity: 0.05; | |
transform-origin: center center; | |
transform: skew(-30deg) scaleY(1) translate(0, 0); | |
@include easeOut; | |
} | |
} | |
.strip__inner-text { | |
will-change: transform, opacity; | |
position: absolute; | |
z-index: 5; | |
top: 50%; | |
left: 50%; | |
width: 70%; | |
transform: translate(-50%,-50%) scale(0.5); | |
opacity: 0; | |
@include easeOut; | |
} | |
&__strip--expanded { | |
width: 100%; | |
top: 0 !important; | |
left: 0 !important; | |
z-index: 3; | |
cursor: default; | |
@include break { | |
min-height: 100vh; | |
} | |
.strip__content { | |
&:hover { | |
&:before { | |
transform: skew(-30deg) scale(1) translate(0, 0); | |
opacity: 0.05; | |
} | |
} | |
} | |
.strip__title { | |
opacity: 0; | |
} | |
.strip__inner-text { | |
opacity: 1; | |
transform: translate(-50%, -50%) scale(1); | |
} | |
} | |
} | |
.strip__title { | |
display: block; | |
margin: 0; | |
position: relative; | |
z-index: 2; | |
width: 100%; | |
font-size: 3.5vw; | |
color: white; | |
@include easeOut; | |
@include break { | |
font-size: 28px; | |
} | |
} | |
.strip__close { | |
position: absolute; | |
right: 3vw; | |
top: 3vw; | |
opacity: 0; | |
z-index: 10; | |
@include easeOut; | |
cursor: pointer; | |
transition-delay: 0.5s; | |
&--show { | |
opacity: 1; | |
} | |
} | |
@keyframes strip1 { | |
0% { | |
transform: translate3d(-100%, 0, 0); | |
} | |
100% { | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes strip2 { | |
0% { | |
transform: translate3d(0, 100%, 0); | |
} | |
100% { | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes strip3 { | |
0% { | |
transform: translate3d(0, -100%, 0); | |
} | |
100% { | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes strip4 { | |
0% { | |
transform: translate3d(0, 100%, 0); | |
} | |
100% { | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
@keyframes strip5 { | |
0% { | |
transform: translate3d(100%, 0, 0); | |
} | |
100% { | |
transform: translate3d(0, 0, 0); | |
} | |
} | |
/* Demo purposes */ | |
body { | |
font-family: 'Lato'; | |
-webkit-font-smoothing: antialiased; | |
text-rendering: geometricPrecision; | |
line-height: 1.5; | |
} | |
h1, h2 { | |
font-weight: 300; | |
} | |
.fa { | |
font-size: 30px; | |
color: white; | |
} | |
h2 { | |
font-size: 36px; | |
margin: 0 0 16px; | |
} | |
p { | |
margin: 0 0 16px; | |
} | |
The only issue I'm having is the white X isn't showing up so I can't exit out once I select a block.
How can i turn to horizontal view permanently ?