Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Skewed Flexbox Panels
main
- for (var i = 1; i <= 5; i++)
section
article
h2 Panel Title
p This is some description text for this panel.
button Toggle images
/*
Panels with images are somewhat jerky when all panels are transitioning. Ideas on improvements are welcome in the comments!
*/
var btn = $('button');
var body = $("body");
btn.on("click", function() {
body.toggleClass("hide-images");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Skewed Flexbox Panels

Experimenting with skew transforms applied to a series of flexbox panels. Switches the flex-direction to columns for smaller screen sizes. Click the toggle button to see panel transitions without background images.

A Pen by Ryan Mulligan on CodePen.

License.

$img-dir: "https://s3-us-west-2.amazonaws.com/s.cdpn.io/225363/";
$section-amount: 5;
// Try messing with the rotate value
$section-rotate: 15;
$mq-desktop: "min-width: 630px";
* {
box-sizing: border-box;
}
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: "Georgia", serif;
font-size: 16px;
line-height: 1.4;
background-color: black;
}
main {
display: flex;
flex-direction: column;
width: 100% + ($section-rotate * 2);
margin-left: percentage($section-rotate) * -.01;
transform: translate3d(0, 0, 0);
@media ($mq-desktop) {
flex-direction: row;
}
section:not(:first-child):not(:last-child):hover {
flex: 2;
&:after {
opacity: .8;
}
article {
opacity: 1;
transform: translateY(0);
transition:
opacity .2s .2s,
transform .2s .2s;
@media ($mq-desktop) {
transform:
translateY(0)
skewX(-#{$section-rotate}deg);
}
}
}
}
section {
flex: 1;
position: relative;
width: 100%;
height: 20vh;
overflow: hidden;
z-index: 1;
transition:
flex-grow .2s,
opacity .2s;
&:before {
content: "";
position: absolute;
width: 100%;
height: 100%;
background-position: center;
background-size: cover;
transition:
transform .2s,
width .2s;
}
&:after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: black;
opacity: 0;
transition: opacity .2s;
}
@media ($mq-desktop) {
width: 20%;
height: 100vh;
margin-right: -1px;
transform:
skewX(#{$section-rotate}deg)
translateZ(0);
&:before {
left: -100%;
width: 400%;
transform: skewX(-#{$section-rotate}deg);
}
}
@for $i from 1 through $section-amount {
&:nth-child(#{$i}) {
&:before {
background-color: darken(red, $i * 5);
background-image: url(#{$img-dir}bg-section--#{$i}.jpg);
.hide-images & {
background-image: none;
}
}
}
&:first-child,
&:last-child {
&:before {
background-color: darken(red, 30%);
}
&:after {
opacity: .5;
}
article {
display: none;
}
}
}
}
article {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
position: absolute;
top: 0; right: 0; left: 0;
margin: auto;
padding: 24px;
width: 100%;
height: 100%;
text-align: center;
color: white;
z-index: 1;
transition:
opacity .2s,
transform .2s;
@media ($mq-desktop) {
opacity: 0;
transform:
translateY(24px)
skewX(-#{$section-rotate}deg);
}
}
h2 {
font-size: 32px;
margin-bottom: 12px;
}
button {
position: fixed;
top: 12px;
left: 12px;
padding: 8px 12px;
font-size: 10px;
text-transform: uppercase;
color: white;
background-color: black;
border: none;
outline: none;
cursor: pointer;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment