nsr-design-idee/assets2/css/main.scss

// palette
$white: #fff7e5;
$yellow: #ffb400;
$blue: #004e66;

@font-face {
  font-family: "repulsor";
  src: url("/assets2/fonts/repulsore.ttf") format("truetype");
}
@font-face {
  font-family: 'Muli';
  font-style: normal;
  font-weight: 400;
  src: local('Muli Regular'), local('Muli-Regular'), url(/assets2/fonts/Muli-Regular.ttf) format('truetype');
}

// mixins
@mixin radial-background() {
  /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#004e66+0,145266+17,0e0e0e+100 */
  background: $blue; /* Old browsers */
  background: -moz-radial-gradient(center, ellipse cover, $blue 0%, #145266 17%, #0e0e0e 100%); /* FF3.6-15 */
  background: -webkit-radial-gradient(center, ellipse cover, $blue 0%,#145266 17%,#0e0e0e 100%); /* Chrome10-25,Safari5.1-6 */
  background: radial-gradient(ellipse at center, $blue 0%, #145266 17%,#0e0e0e 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */  
}


html {
  padding: 0;
  margin: 0;

  height: 100%;
  font-family: Muli;
}
body {
  @include radial-background();
}


header {
  margin-left: auto;
  margin-right: auto;
  width: 800px;
  height: 100px;

  h1 {
    text-align: center;
    color: $white;
    font-family: repulsor;
    font-size: 42px;
    margin-bottom: 0;
  }
  h2 {
    margin-top: 0;

    text-align: center;
    color: $yellow;
    font-size: 30px;
  }
}

/** glitch **/
$glitch-width: 800px;
$glitch-height: 100px;
$gap-horizontal: 10px;
$gap-vertical: 5px;
$time-anim: 4s;
$delay-anim: 2s;
$blend-mode-1: none;
$blend-mode-2: none;
$blend-mode-3: none;
$blend-mode-4: none;
$blend-mode-5: overlay;
$blend-color-1: transparent;
$blend-color-2: transparent;
$blend-color-3: transparent;
$blend-color-4: transparent;
$blend-color-5: #af4949;

header {
  .glitch {
    position: absolute;
    width: $glitch-width;
    max-width: 400px;
    height: $glitch-height;
    max-height: calc(400px * 1.25);
    overflow: hidden;
    margin: 0 auto;
  }

  .glitch:hover {
    cursor: pointer;
  }

  .glitch__img {
    position: absolute;
    top: calc(-1 * #{$gap-vertical});
    left: calc(-1 * #{$gap-horizontal});
    width: calc(100% + #{$gap-horizontal} * 2);
    height: calc(100% + #{$gap-vertical} * 2);
    background: url(../img/1.jpg) no-repeat 50% 0;
    background-color: $blend-color-1;
    background-size: cover;
    background-blend-mode: $blend-mode-1;
  }

  .glitch__img:nth-child(2) {
    background-color: $blend-color-2;
    background-blend-mode: $blend-mode-2;
  }

  .glitch__img:nth-child(3) {
    background-color: $blend-color-3;
    background-blend-mode: $blend-mode-3;
  }

  .glitch__img:nth-child(4) {
    background-color: $blend-color-4;
    background-blend-mode: $blend-mode-4;
  }

  .glitch__img:nth-child(5) {
    background-color: $blend-color-5;
    background-blend-mode: $blend-mode-5;
  }

  .glitch__img:nth-child(n+2) {
    opacity: 0;
  }
  .glitch:hover .glitch__img:nth-child(n+2) {
    opacity: 1;
  }
  .glitch:hover .glitch__img:nth-child(2) {
    transform: translate3d($gap-horizontal,0,0);
    animation: glitch-anim-1-horizontal $time-anim infinite linear alternate;
  }

  .glitch:hover > .glitch__img:nth-child(3) {
    transform: translate3d(calc(-1 * #{$gap-horizontal}),0,0);
    animation: glitch-anim-2-horizontal $time-anim infinite linear alternate;
  }

  .glitch:hover > .glitch__img:nth-child(4) {
    transform: translate3d(0, calc(-1 * #{$gap-vertical}), 0) scale3d(-1,-1,1);
    animation: glitch-anim-3-horizontal $time-anim infinite linear alternate;
  }

  /* Hover flash animation on last image */
  .glitch:hover > .glitch__img:nth-child(5) {
    animation: glitch-anim-flash 0.5s steps(1,end) infinite;
  }

  @keyframes glitch-anim-1-horizontal {
    0% { 
      -webkit-clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
      clip-path: polygon(0 2%, 100% 2%, 100% 5%, 0 5%);
    }
    10% {
      -webkit-clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
      clip-path: polygon(0 15%, 100% 15%, 100% 15%, 0 15%);
    }
    20% {
      -webkit-clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
      clip-path: polygon(0 10%, 100% 10%, 100% 20%, 0 20%);
    }
    30% {
      -webkit-clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
      clip-path: polygon(0 1%, 100% 1%, 100% 2%, 0 2%);
    }
    40% {
      -webkit-clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
      clip-path: polygon(0 33%, 100% 33%, 100% 33%, 0 33%);
    }
    50% {
      -webkit-clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
      clip-path: polygon(0 44%, 100% 44%, 100% 44%, 0 44%);
    }
    60% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
      clip-path: polygon(0 50%, 100% 50%, 100% 20%, 0 20%);
    }
    70% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
      clip-path: polygon(0 70%, 100% 70%, 100% 70%, 0 70%);
    }
    80% {
      -webkit-clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
      clip-path: polygon(0 80%, 100% 80%, 100% 80%, 0 80%);
    }
    90% {
      -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
      clip-path: polygon(0 50%, 100% 50%, 100% 55%, 0 55%);
    }
    100% {
      -webkit-clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
      clip-path: polygon(0 70%, 100% 70%, 100% 80%, 0 80%);
    }

    @keyframes glitch-anim-flash {
      0% { 
        opacity: 0.2; 
        transform: translate3d($gap-horizontal, $gap-vertical, 0);
      }
      33%, 100% { 
        opacity: 0;
        transform: translate3d(0,0,0);
      }
    }

  }

}