A resposive expanding column layout to present projects, articles, and more.
Created
July 11, 2019 10:19
-
-
Save MbarkT3STO/4b62b639605af79d898ff833446c410f to your computer and use it in GitHub Desktop.
Expanding Column Layout
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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(); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$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; | |
} | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment