Skewed Flexbox Panels

index.jade

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

script.js

/*
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");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

Skewed Flexbox Panels.markdown

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.

style.scss

$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;
}