<!-- Fork me on GitHub ribbon -->
<a href="https://github.com/Elitewares/CSS3-Slider" target="_blank" rel="noopener"><img style="position: fixed; top: 0; right: 0; border: 0;z-index:99;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<!-- Header -->
<!-- Slider -->
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        <img src="https://cdn.stocksnap.io/img-thumbs/960w/VVHE6VHMAW.jpg">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        <img src="https://cdn.stocksnap.io/img-thumbs/960w/AKWVXIXFA8.jpg">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        <img src="https://cdn.stocksnap.io/img-thumbs/960w/TPLJK7JPRR.jpg">
          <h1>Lorem ipsum dolor</h1>
          <h2>Nam ultrices pellentesque facilisis. In semper tellus mollis nisl pulvinar vitae vulputate lorem consequat. Fusce odio tortor, pretium sit amet auctor ut, ultrices vel nibh.</h2>
        <img src="https://cdn.stocksnap.io/img-thumbs/960w/XJ2BKV9ASS.jpg">
    <ul>
      <li>
      </li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
<style>
    /* Reset */
*{margin:0;padding:0;}
body{
  min-width:900px;
}
/* Slider */
#slider{
  width:100%;
  height:500px;
  position:relative;
  overflow:hidden;
}
@keyframes load{
  from{left:-100%;}
  to{left:0;}
}
.slides{
  width:400%;
  height:100%;
  position:relative;
  -webkit-animation:slide 30s infinite;
  -moz-animation:slide 30s infinite;
  animation:slide 30s infinite;
}
.slider{
  width:25%;
  height:100%;
  float:left;
  position:relative;
  z-index:1;
  overflow:hidden;
}
.slide img{
  width:100%;
  height:100%;
}
.slide img{
  width:100%;
  height:100%;
}
.image{
  width:100%;
  height:100%;
}
.image img{
  width:100%;
  height:auto;
}
/* Legend */
.legend{
  border:500px solid transparent;
  border-left:800px solid rgba(52, 73, 94, .7);
  border-bottom:0;
  position:absolute;
  bottom:0;
}
/* Contents */
.content{
  width:100%;
  height:100%;
  position:absolute;
  overflow:hidden;
}
.content-txt{
  width:400px;
  height:150px;
  float:left;
  position:relative;
  top:300px;
  -webkit-animation:content-s 7.5s infinite;
  -moz-animation:content-s 7.5s infinite;
  animation:content-s 7.5s infinite;
}
.content-txt h1{
  font-family:Arial;
  text-transform:uppercase;
  font-size:24px;
  color:#fff;
  text-align:left;
  margin-left:30px;
  padding-bottom:10px;
}
.content-txt h2{
  font-family:arial;
  font-weight:normal;
  font-size:14px;
  font-style:italic;
  color:#fff;
  text-align:left;
  margin-left:30px;
}
/* Switch */
.switch{
  width:120px;
  height:10px;
  position:absolute;
  bottom:50px;
  z-index:99;
  left:30px;
}
.switch > ul{
  list-style:none;
}
.switch > ul > li{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#333;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
.switch ul{
  overflow:hidden;
}
.on{
  width:100%;
  height:100%;
  border-radius:50%;
  background:#f39c12;
  position:relative;
  -webkit-animation:on 30s infinite;
  -moz-animation:on 30s infinite;
  animation:on 30s infinite;
}
/* Animation */
@-webkit-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@-moz-keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@keyframes slide{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:-100%;
  }
  46%{
    margin-left:-100%;
  }
  50%{
    margin-left:-200%;
  }
  71%{
    margin-left:-200%;
  }
  75%{
    margin-left:-300%;
  }
  96%{
    margin-left:-300%;
  }
}
@-webkit-keyframes content-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@-moz-keyframes content-s{
  0%{left:-420px;}
  10%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@keyframes content-s{
  0%{left:-420px;}
  10%{left:20px;}
  15%{left:0px;}
  30%{left:0px;}
  40%{left:0px;}
  50%{left:0px;}
  60%{left:0px;}
  70%{left:0;}
  80%{left:-420px;}
  90%{left:-420px;}
  100%{left:-420px;}
}
@-webkit-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}
@-moz-keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}
@keyframes on{
  0%,100%{
    margin-left:0%;
  }
  21%{
    margin-left:0%;
  }
  25%{
    margin-left:15px;
  }
  46%{
    margin-left:15px;
  }
  50%{
    margin-left:30px;
  }
  71%{
    margin-left:30px;
  }
  75%{
    margin-left:45px;
  }
  96%{
    margin-left:45px;
  }
}
/* main */
/* Reset */
a{text-decoration:none;color:inherit;}
html{width:100%;height:100%;}
/* Body */
body{
  background:#fff;
}
/* Content */
.container{
  width:70%;
  height:auto;
  padding:20px 0;
  margin:20px auto;
}
.container h1{
  font-family:Arial;
  font-size:24px;
  color:#222;
  text-transform:uppercase;
  margin:20px 0;
}
.container h2{
  font-family:arial;
  font-size:16px;
  color:#444;
  margin-top:10px;
}
.container h3{
  font-family:arial;
  font-weight:normal;
  font-size:16px;
  color:#aaa;
}
.code{
  width:600px;
  height:auto;
  margin:20px auto;
  padding:10px 20px;
  background:#222;
  border-left:10px solid #aaa;
  font-family: arial;
  font-size:16px;
  color:#fff;
}
.code span{
  color:#89A978;
}
.space{
  width:20px;
  height:1px;
  float:left;
}
#credits{
  position:relative;
  width:100%;
  margin: auto;
  bottom:0;
  margin-bottom:20px;
  font-family:'Open Sans', sans-serif;
  color:#b297a2;
  font-size:10px;
  text-transform: uppercase;
  text-align : center;
}
#credits a {
  color:#b297a2;
}
</style>		
<a href="https://dribbble.com/shots/3774469-T-R-A-V-E-L-E-R" target="_blank" rel="noopener">
  <img src="http://icons.iconarchive.com/icons/uiconstock/socialmedia/256/Dribbble-icon.png">
</a>
<a href="https://twitter.com/NikolayTalanov" target="_blank" rel="noopener">
  <img src="https://cdn1.iconfinder.com/data/icons/logotypes/32/twitter-128.png">
</a>
<style>
    *, *:before, *:after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Roboto', Helvetica, Arial, sans-serif;
  background: #000;
}
$numOfParts: 4;
$animTime: 1s;
$stagger: 0.08s;
$sliderReadyTrans: all $animTime/2 $animTime;
$maxLettersStagger: 6;
$letterStagger: 0.1s;
.slider {
  overflow: hidden;
  position: relative;
  height: 100vh;
  color: #fff;
  @mixin sliderReady {
    .slider.s--ready & {
      @content;
    }
  }
  &__top-heading {
    z-index: $numOfParts*3;
    position: absolute;
    left: 0;
    top: 100px;
    width: 100%;
    text-align: center;
    font-size: 16px;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    transition: $sliderReadyTrans;
    transform: translateY(-30px);
    opacity: 0;
    @include sliderReady {
      transform: translateY(0);
      opacity: 1;
    }
  }
  &__slides {
    position: relative;
    height: 100%;
  }
  &__slide {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    &.s--active {
      pointer-events: auto;
    }
    @mixin slidePrev {
      .slider__slide.s--prev & {
        @content;
      }
    }
    @mixin slideActive {
      .slider__slide.s--active & {
        @content;
      }
    }
    &-content {
      z-index: $numOfParts + 2;;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
      height: 100%;
      text-transform: uppercase;
      line-height: 1;
    }
    @mixin subTextsActiveSlide {
      opacity: 0;
      transition: $animTime/2;
      @include slideActive {
        transition-delay: $animTime*0.65;
        opacity: 1;
        transform: translateY(0);
      }
    }
    &-subheading {
      margin-bottom: 20px;
      font-size: 24px;
      letter-spacing: 2px;
      transform: translateY(20px);
      @include subTextsActiveSlide;
    }
    &-heading {
      $fontSize: 60px;
      display: flex;
      margin-bottom: 20px;
      font-size: $fontSize;
      letter-spacing: 12px;
      span {
        display: block;
        opacity: 0;
        transform: translateY($fontSize*-1);
        transition: all $animTime/3;
        @include slidePrev {
          transform: translateY($fontSize)
        }
        @include slideActive {
          opacity: 1;
          transform: translateY(0);
        }
        @for $i from 1 through $maxLettersStagger {
          &:nth-child(#{$i}) {
            $delay: $letterStagger * ($i - 1);
            transition-delay: $delay;
            @include slideActive {
              transition-delay: $delay + $animTime/3;
            }
          }
        }
        &:nth-child(n+#{$maxLettersStagger + 1}) {
          $delay: $letterStagger * $maxLettersStagger;
          transition-delay: $delay;
          @include slideActive {
            transition-delay: $delay + $animTime/3;
          }
        }
      }
    }
    &-readmore {
      position: relative;
      font-size: 14px;
      text-transform: lowercase;
      backface-visibility: hidden;
      transform: translateY(-20px);
      cursor: pointer;
      @include subTextsActiveSlide;
      &:before {
        content: '';
        position: absolute;
        left: -2px;
        top: -3px;
        width: calc(100% + 4px);
        height: calc(100% + 6px);
        background: rgba(255,255,255,0.4);
        transform: scaleX(0.3);
        transform-origin: 0 50%;
        transition: transform 0.3s;
      }
      &:hover:before {
        transform: scaleX(1);
      }
    }
    &-parts {
      position: absolute;
      left: 0;
      top: 0;
      display: flex;
      width: 100%;
      height: 100%;
      &:after {
        content: '';
        z-index: $numOfParts + 1;
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0,0,0,0.1);
      }
    }
    &-part {
      $partW: (100vw / $numOfParts);
      position: relative;
      width: percentage(1 / $numOfParts);
      height: 100%;
      $partRef: &;
      $imageFadeAT: $animTime/4;
      &-inner {
        overflow: hidden;
        position: relative;
        width: 100%;
        height: 100%;
        background-size: 0 0;
        background-repeat: no-repeat;
        transition: transform $animTime/2 ease-in-out;
        &:before {
          content: '';
          position: absolute;
          width: 100vw;
          height: 100%;
          background-image: inherit;
          background-size: cover;
          background-position: center center;
          transition: opacity $imageFadeAT;
          opacity: 0;
        }
        @for $i from 1 through $numOfParts {
          #{$partRef}:nth-child(#{$i}) & {
            $delayOut: ($numOfParts - $i) * $stagger;
            $delayIn: $i * $stagger + $animTime/5;
            z-index: $numOfParts - $i;
            transition-delay: $delayOut;
            transform: translateX(percentage($i / $numOfParts * -1.3));
            @include slideActive {
              transition-delay: $delayIn;
            }
            &:before {
              left: $partW * ($i - 1) * -1;
              transition-delay: $delayOut + $imageFadeAT/2;
              @include slideActive {
                transition-delay: $delayIn;
              }
            }
          }
        }
        @include slideActive {
          transform: translateX(0);
          transition-timing-function: ease;
          &:before {
            opacity: 1;
          }
        }
      }
    }
  }
  &__control {
    $size: 50px;
    z-index: 100;
    position: absolute;
    left: 50px;
    top: 50%;
    width: $size;
    height: $size;
    margin-top: $size/-2;
    border-radius: 50%;
    background: rgba(255,255,255,0.4);
    transform: translateX($size*-1);
    opacity: 0;
    transition: $sliderReadyTrans;
    cursor: pointer;
    &:before {
      content: '';
      position: absolute;
      left: 50%;
      top: 50%;
      width: 20px;
      height: 20px;
      margin-left: -10px;
      margin-top: -10px;
      border: 2px solid #000;
      border-bottom: none;
      border-right: none;
      transform: translateX(5px) rotate(-45deg);
    }
    &--right {
      left: auto;
      right: 50px;
      transform: translateX($size);
      &:before {
        transform: translateX(-5px) rotate(135deg);
      }
    }
    @include sliderReady {
      transform: translateX(0);
      opacity: 1;
    }
  }
}
.icon-link {
  z-index: 100;
  position: absolute;
  left: 5px;
  bottom: 5px;
  width: 32px;
  img {
    width: 100%;
    vertical-align: top;
  }
  &--twitter {
    left: auto;
    right: 5px;
  }
}
</style>