Split Showcase

index.html

<figure id="showcase">
  <section></section>
  <section></section>
  <section></section>
  <section></section>
</figure>

script.js

/* 
	Pure CSS photo gallery concept.
  Images by http://unsplash.com
*/

scripts

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

split-showcase.markdown

Split Showcase

Photo showcase concept. Morphing image parts. Polygonal clip path animation. SASS each loop w/ maps. Pure CSS.

A Pen by Arsen Zbidniakov on CodePen.

License.

style.scss

@import "compass/css3";

body {
  background: #000;
  overflow: hidden;
}

#showcase {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;  
  width: 1000px;
  height: 700px;
}

section {
  display: inline-block;
  position: relative;
  width: 25%;
  height: 100%;
  background-size: cover;
  &:after {
    content: '';
    position: absolute;
    top: 0; 
    width: 100%;
    height: 100%;
    @include transition(all .5s);
  }
}

$img-01: "https://unsplash.imgix.net/photo-1414924347000-9823c338079b?fit=crop&fm=jpg&h=700&q=75&w=1050";
$img-02: "https://unsplash.imgix.net/30/skater.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050";
$img-03: "https://unsplash.imgix.net/photo-1415226581130-91cb7f52f078?fit=crop&fm=jpg&h=700&q=75&w=1050";
$img-04: "https://ununsplash.imgix.net/40/lUUnN7VGSoWZ3noefeH7_Baker%20Beach-12.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050";

$sections: (
  1: (
    (23% 18%, 95% 13%, 100% 91%, 55% 87%),
    (95% 10%, 100% 80%, 62% 77%, 45% 12%),
    (100% 67%, 48% 63%, 28% 9%, 95% 3%),
    (78% 72%, 58% 34%, 95% 27%, 100% 73%)
  ),
  2: (
    (0% 7%, 100% 9%, 95% 93%, 5% 95%),
    (100% 3%, 95% 95%, 5% 90%, 0% 5%),
    (95% 83%, 5% 78%, 0% 6%, 100% 11%),
    (5% 79%, 0% 21%, 100% 16%, 95% 83%)
  ),
  3: (
    (5% 11%, 100% 14%, 95% 88%, 0% 91%),
    (100% 14%, 95% 84%, 0% 91%, 5% 7%),
    (95% 79%, 0% 86%, 5% 7%, 100% 3%),
    (0% 85%, 5% 14%, 100% 3%, 95% 95%)
  ),
  4: (
    (5% 18%, 89% 21%, 62% 73%, 0% 83%),
    (57% 31%, 45% 67%, 0% 77%, 5% 18%),
    (45% 57%, 0% 67%, 5% 8%, 72% 12%),
    (0% 77%, 5% 18%, 47% 21%, 32% 67%)
  )
);

@each $section, $key in $sections {
  $bg: -33.33333 + $section*33.33333;
  $clip-01: nth($key, 1);
  $clip-02: nth($key, 2);
  $clip-03: nth($key, 3);
  $clip-04: nth($key, 4);
  
  section:nth-child(#{$section}) {
    @include animation(section-#{$section} 8s both infinite);
  }

  @include keyframes(section-#{$section}) {
    0%, 20%, 100% { 
      background: url($img-01) #{$bg}#{'%'} 0%;
      -webkit-clip-path: polygon($clip-01);
    }
    25%, 45% {
      background: url($img-02) #{$bg}#{'%'} 0%;
      -webkit-clip-path: polygon($clip-02);
    }
    50%, 70% { 
      background: url($img-03) #{$bg}#{'%'} 0%;
      -webkit-clip-path: polygon($clip-03);
    }
    75%, 95% { 
      background: url($img-04) #{$bg}#{'%'} 0%;
      -webkit-clip-path: polygon($clip-04);
    }
  }
}

@media (max-width: 1000px) {
  #showcase {
    position: absolute;
    top: -115px; left: -200px;
    margin: 0;
    @include scale(.65);
  }
}