Slider with complex animation and half-collored angled text

index.html

<div class="con">
  <div class="con__slide  con__slide--1">
    <div class="con__slide-top con__slide--1-top active-slide-left-top">
      <div class='con__slide-top-inner con__slide--1-top-inner'>
        <div class='con__slide-top-inner-text con__slide--1-top-inner-text active-slide1-top-text'>
          <h1 class='con__slide-h con__slide--1-top-h'>some nice slider<br> here wow</h1>
        </div>
      </div>
    </div>
    <!--     slide--1 top end -->
    <div class="con__slide-bot  con__slide--1-bot active-slide-left-bot">
      <div class='con__slide-bot-text con__slide--1-bot-text active-slide1-bot-text'>
        <h1 class='con__slide-h con__slide--1-bot-h'>some nice slider<br> here wow</h1>
      </div>
    </div>
    <!--    slide--1 bot end -->
    <div class="con__slide-content con__slide--1-content active-slide-left-content">
      <svg class='con__slide--1-content-logo' version="1" xmlns="http://www.w3.org/2000/svg" width="500" height="500" viewBox="0 0 600.000000 600.000000"><path d="M280.5 13.6c-19 1.9-25.9 2.9-38.5 5.4-73.3 14.6-139.2 59.2-181.4 122.8-24.5 36.8-40.2 79.8-45.8 125.2-1.6 13.5-1.6 51.5 0 65 5.6 45.4 21.3 88.4 45.8 125.2 47.1 70.9 121.3 116.5 206.4 127 5.8.7 20.4 1.3 32.5 1.3 12.1 0 26.7-.6 32.5-1.3 115.7-14.2 209.7-93.7 242.6-205.1 3.8-12.9 7.7-31.8 9.6-47.1 1.6-13.5 1.6-51.4 0-65-5.6-45.4-21.3-88.4-45.8-125.2-46.2-69.6-118.6-115-201.5-126.3-10.9-1.5-48.1-2.7-56.4-1.9zm39 47.4c63.6 5.9 120.7 35.1 161.2 82.4 33.4 39.1 52.5 84.4 57.3 136.1 4.2 45.6-6.5 95.6-29 135.7-29.5 52.4-75.8 91.3-131.5 110.5-72.2 24.8-149.5 14.4-213.1-28.8-30.3-20.6-55.7-48.5-74.4-81.7-22.5-40.1-33.2-90.1-29-135.7 6.2-67.1 37.6-125.6 90-167.5 46.5-37.4 109.5-56.4 168.5-51z"/><path d="M295 123.3c-1.9.7-40.7 26.1-86.2 56.5-64.5 43-83.1 55.9-84.5 58.4-1.7 3.1-1.8 7.5-1.8 61.3 0 53.9.1 58.2 1.8 61.3 1.4 2.5 20.1 15.5 85.5 59.1 49.2 32.8 85.1 56 87 56.4 1.9.4 4.9.1 7-.6 2-.7 40.9-26.1 86.4-56.5 64.5-43 83.1-55.9 84.5-58.4 1.7-3.1 1.8-7.5 1.8-61.3 0-53.9-.1-58.2-1.8-61.3-1.4-2.5-20.1-15.5-85.8-59.2-46.1-30.8-84.5-56-85.2-56-.6 0-2.1-.2-3.2-.5s-3.6.1-5.5.8zm-11 78.9l-.1 35.3-32.8 21.8-32.9 21.9-26.6-17.8-26.6-17.7 58.7-39.3c32.4-21.6 59.1-39.3 59.6-39.3.4-.1.7 15.8.7 35.1zm91 4.1l59 39.4-26.6 17.7-26.6 17.8-32.9-21.9-32.8-21.8-.1-35.3c0-19.3.2-35.2.5-35.2s27.1 17.7 59.5 39.3zm-49.2 74.8c14.1 9.4 26 17.5 26.5 17.8 1 1-52.1 36.4-53.6 35.8-3.2-1.4-52.1-34.8-51.8-35.5.5-.9 51.3-35 52.4-35.1.4-.1 12.3 7.6 26.5 17zm-135.2 18.5s-8.5 5.8-18.8 12.8L153 325.1V274l18.9 12.7c10.4 7.1 18.8 12.8 18.7 12.9zm255.4-.1V325l-18.8-12.7-18.8-12.8 18.5-12.7c10.3-6.9 18.7-12.7 18.9-12.7.1-.1.2 11.4.2 25.4zm-194.8 40.2l32.7 21.8.1 35.2c0 19.4-.2 35.3-.5 35.3s-27.1-17.7-59.5-39.3l-59-39.4 26.2-17.6c14.5-9.6 26.5-17.6 26.8-17.6.3-.1 15.2 9.7 33.2 21.6zm156.3-4l26.5 17.6-59 39.4c-32.4 21.6-59.2 39.3-59.5 39.3-.3 0-.5-15.9-.5-35.3l.1-35.2 32.7-21.7c18-12 32.8-21.8 33-21.8.1 0 12.1 7.9 26.7 17.7z"/></svg>
    </div>
    <!--     slide--1 content end -->
  </div>
  <!-- slide--1 end -->

  <!--   slide 2 -->
  <div class="con__slide con__slide--right con__slide--2">
    <div class="con__slide-top con__slide--right-top con__slide--2-top active-slide-right-top">
      <div class='con__slide-top-inner con__slide--right-top-inner con__slide--2-top-inner'>
        <div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--2-top-inner-text active-slide2-top-text'>
          <h1 class='con__slide-h con__slide--right-top-h con__slide--2-top-h'>another slide<br> such wow</h1>
        </div>
      </div>
    </div>
    <!--     slide--2 top end -->
    <div class="con__slide-bot con__slide--right-bot con__slide--2-bot active-slide-right-bot">
      <div class='con__slide-bot-text con__slide--right-bot-text con__slide--2-bot-text active-slide2-bot-text'>
        <h1 class='con__slide-h con__slide--right-bot-h con__slide--2-bot-h'>another slide<br> such wow</h1>
      </div>
    </div>
    <!--     slide--2 bot end -->
    <div class="con__slide-content con__slide--right-content con__slide--2-content active-slide-right-content">
      <img class='con__slide--right-content-image con__slide--2-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/doge_snow.png" alt="" />
    </div>
    <!--     slide--2 content end -->
  </div>
  <!-- slide--2 end -->
  
  <div class="con__slide con__slide--3">
    <div class="con__slide-top  con__slide--3-top active-slide-left-top">
      <div class='con__slide-top-inner con__slide--3-top-inner'>
        <div class='con__slide-top-inner-text con__slide--3-top-inner-text active-slide3-top-text'>
          <h1 class='con__slide-h con__slide--3-top-h'>half collored<br> text so nice</h1>
        </div>
      </div>
    </div>
    <!--    slide--3 top end -->
    <div class="con__slide-bot  con__slide--3-bot active-slide-left-bot">
      <div class='con__slide-bot-text con__slide--3-bot-text active-slide3-bot-text'>
        <h1 class='con__slide-h  con__slide--3-bot-h'>half collored<br> text so nice</h1>
      </div>
    </div>
    <!--    slide--3 bot end -->
    <div class="con__slide-content con__slide--3-content active-slide-left-content">
      <img class='con__slide--right-content-image con__slide--3-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/butterfly_(1).png" alt="" />
    </div>
    <!--     slide--3 content end -->
  </div>
  <!-- slide--3 end -->
  
  <div class="con__slide con__slide--right con__slide--4">
    <div class="con__slide-top con__slide--right-top con__slide--4-top active-slide-right-top">
      <div class='con__slide-top-inner con__slide--right-top-inner con__slide--4-top-inner'>
        <div class='con__slide-top-inner-text con__slide--right-top-inner-text con__slide--4-top-inner-text active-slide4-top-text'>
          <h1 class='con__slide-h con__slide--right-top-h con__slide--4-top-h'><a class='con__slide--4-top-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1>
        </div>
      </div>
    </div>
    <!--     slide--4 top end -->
    <div class="con__slide-bot con__slide--right-bot con__slide--4-bot active-slide-right-bot">
      <div class='con__slide-bot-text con__slide--right-bot-text con__slide--4-bot-text active-slide4-bot-text'>
        <h1 class='con__slide-h con__slide--right-bot-h con__slide--4-bot-h'><a class='con__slide--4-bot-h-link' href="https://codepen.io/mrspok407/" target="_blank">checkout my<br> other pens</a></h1>
      </div>
    </div>
    <!--     slide--4 bot end -->
    <div class="con__slide-content con__slide--right-content con__slide--4-content active-slide-right-content">
      <a href="https://twitter.com/mrspok407" target="_blank"><img class='con__slide--right-content-image con__slide--4-content-image' src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/twi_(1).png" alt="" /></a> 
    </div>
    <!--     slide--4 content end -->
  </div>
  <!-- slide--4 end -->
  
  <div class="con__nav">
    <div data-target='up' class='con__nav-scroll con__nav-scroll--goup'></div>
    <div data-target='down' class='con__nav-scroll con__nav-scroll--godown'></div>
    <ul class='con__nav-list'>
      <li data-target="1" class='con__nav-item con__nav-item--1 nav-active'></li>
      <li data-target="2" class='con__nav-item con__nav-item--2'></li>
      <li data-target="3" class='con__nav-item con__nav-item--3'></li>
      <li data-target="4" class='con__nav-item con__nav-item--4'></li>
    </ul>
  </div>
<!--   nav end -->
</div>

script.babel

$(document).ready(function() {

  var $slides = $('.con__slide').length,
      topAnimSpd = 650,
      textAnimSpd = 1000,
      nextSlideSpd = topAnimSpd + textAnimSpd,
      animating = true,
      animTime = 4000,
      curSlide = 1,
      nextSlide, scrolledUp;

  setTimeout(function() {
    animating = false;
  }, 2300);

  function navigateUp() {
    if (curSlide > 1) {
      scrolledUp = true;
      pagination(curSlide);
      curSlide--;
    }
  }

  function navigateDown() {
    if (curSlide < $slides) {
      scrolledUp = false;
      pagination(curSlide);
      curSlide++;
      console.log(curSlide);
    }
  }

  $(window).on('load', function() {
    $('.con__slide--1').addClass('active');
  });

  function pagination(slide, target) {
    animating = true;
    // Check if pagination was triggered by scroll/keys/arrows or direct click. If scroll/keys/arrows then check if scrolling was up or down.
    if (target === undefined) {
      nextSlide = scrolledUp ? slide - 1 : slide + 1;
    } else {
      nextSlide = target;
    }
    ////////// Slides //////////
    $('.con__slide--' + slide).removeClass('active');
    
    setTimeout(function() {
      $('.con__slide--' + nextSlide).addClass('active');
    }, nextSlideSpd);
    
    ////////// Nav //////////
    $('.con__nav-item--' + slide).removeClass('nav-active');
    $('.con__nav-item--' + nextSlide).addClass('nav-active');

    setTimeout(function() {
      animating = false;
    }, animTime);
  }

  // Mouse wheel trigger
  $(document).on('mousewheel DOMMouseScroll', function(e) {
    var delta = e.originalEvent.wheelDelta;
    if (animating) return;
    // Mouse Up
    if (delta > 0 || e.originalEvent.detail < 0) {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  // Direct trigger
  $(document).on("click", ".con__nav-item:not(.nav-active)", function() {
    // Essential to convert target to a number with +, so curSlide would be a number
    var target = +$(this).attr('data-target');
    if (animating) return;
    pagination(curSlide, target);
    curSlide = target;
  });

  // Arrow trigger
  $(document).on('click', '.con__nav-scroll', function() {
    var target = $(this).attr('data-target');
    if (animating) return;
    if (target === 'up') {
      navigateUp();
    } else {
      navigateDown();
    }
  });

  // Key trigger
  $(document).on("keydown", function(e) {
    if (animating) return;
    if (e.which === 38) {
      navigateUp();
    } else if (e.which === 40) {
      navigateDown();
    }
  });

  var topLink = $(".con__slide--4-top-h-link"),
      botLink = $(".con__slide--4-bot-h-link");
  $(".con__slide--4-top-h-link, .con__slide--4-bot-h-link").on({
    mouseenter: function() {
      topLink.css('text-decoration', 'underline');
      botLink.css('text-decoration', 'underline');
    },
    mouseleave: function() {
      topLink.css('text-decoration', 'none');
      botLink.css('text-decoration', 'none');
    }
  });
});

scripts

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

slider-with-complex-animation-and-half-collored-angled-text.markdown

Slider with complex animation and half-collored angled text

A Pen by Ruslan Pivovarov on CodePen.

License.

style.scss

html {
  box-sizing: border-box;
}

*,
*:before,
*:after {
  box-sizing: inherit;
  margin: 0;
  padding: 0;
}

@mixin mediaMaxH($height) {
  @media screen and (max-height: $height) {
    @content;
  }
}

@mixin mediaMaxW($width) {
  @media screen and (max-width: $width) {
    @content;
  }
}

$bgImage: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/537051/image.jpg') center center no-repeat;
$showDelay: 350ms;
$textShowDelay: $showDelay + 1000ms;
$topSpeed: 650ms;
$bot-TextSpeed: 1000ms;
$contSpeed: 1400ms;

$skewColor: rgba(0, 0, 0, .4);
$slide1TopTextClr: #c43838;
$slide2TopTextClr: #2d48e2;
$slide3TopTextClr: #e0bb28;
$slide4TopTextClr: #3ee84f;
$slideBotTextClr: #fff;

body {
  font-family: 'Roboto', sans-serif;
}

.con {
  position: relative;
  height: 100vh;
  background: $bgImage;
  background-size: cover;
  overflow: hidden;
  //////////// Slide General /////////////
  &__slide {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    &-h {
      display: inline-block;
      text-align: center;
      text-transform: uppercase;
      font: {
        size: 60px;
      }
    }
    &-top,
    &-bot {
      position: absolute;
      background: $skewColor;
    }
    &-top {
      top: -200px;
      left: -835px;
      height: 1235px;
      width: 550px;
      transform: rotate(25deg);
      transition: transform $topSpeed $bot-TextSpeed;
      &-inner {
        position: fixed;
        top: -59px;
        right: -175px;
        width: 100%;
        height: 500px;
        transform: rotate(20deg);
        overflow: hidden;
        &-text {
          position: absolute;
          right: 21px;
          top: 649px;
          transform: rotate(-45deg);
          transition: transform $bot-TextSpeed;
        }
      }
    }
    &-bot {
      top: -50px;
      left: -884px;
      width: 700px;
      height: 1700px;
      transform: rotate(-45deg);
      overflow: hidden;
      transition: transform $bot-TextSpeed $bot-TextSpeed + 100ms;
      &-text {
        position: absolute;
        right: -440px;
        top: 430px;
        transform: rotate(45deg);
        transition: transform $bot-TextSpeed;
      }
    }
  }
  /////////////// Slide 1 //////////////
  &__slide--1 {
    &-top {
      &-h {
        text-shadow: 0 0 1px $slide1TopTextClr;
        color: $slide1TopTextClr;
      }
    }
    &-bot {
      &-h {
        text-shadow: 0 0 1px $slideBotTextClr;
        color: $slideBotTextClr;
      }
    }
    &-content {
      position: absolute;
      right: 300px;
      top: 50%;
      transform: translateY(-55%);
      opacity: 0;
      transition: transform $bot-TextSpeed, opacity $bot-TextSpeed;
      @include mediaMaxW(1350px) {
        right: 15%;
      }
      @include mediaMaxW(1160px) {
        right: 5%;
      }
      &-logo {
        fill: #e5e5e5;
        @include mediaMaxH(730px) {
          width: 300px;
        }
        @include mediaMaxW(1350px) {
          width: 300px;
        }
      }
    }
  }
  /////////// Slide Right /////////////
  &__slide--right {
    &-top {
      left: initial;
      right: -195px;
      right: -780px;
      transform: rotate(-25deg);
      transition: transform $topSpeed $bot-TextSpeed;
      &-inner {
        top: -31px;
        left: -249px;
        transform: rotate(-20deg);
        overflow: overflow;
        &-text {
          right: 10px;
          top: 620px;
          transform: rotate(45deg);
          animation: initial;
          transition: transform $bot-TextSpeed 0s;
        }
      }
      &-h {
        width: 450px;
        text-shadow: 0 0 1px $slide2TopTextClr;
        color: $slide2TopTextClr;
      }
    }
    &-bot {
      left: initial;
      right: -84px;
      right: -884px;
      transform: rotate(45deg);
      animation: initial;
      overflow: hidden;
      transition: transform $bot-TextSpeed $bot-TextSpeed + 100;
      &-text {
        left: -560px;
        top: 150px;
        transform: rotate(-45deg);
        animation: initial;
        transition: transform $bot-TextSpeed 0s;
        //transition-delay: 0s;
      }
      &-h {
        text-shadow: 0 0 1px $slideBotTextClr;
        color: $slideBotTextClr;
      }
    }
    &-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-95%, -45%);
      opacity: 0;
      transition: transform $contSpeed 0s, opacity $contSpeed 0s, z-index 0s 2.2s;
      z-index: -9999;
      &-image {
        @include mediaMaxH(730px) {
          width: 80%;
        }
        @include mediaMaxW(1366px) {
          width: 80%;
        }
      }
    }
  }
  ////////////// Slide 3 ////////////////
  &__slide--3 {
    &-top {
      &-h {
        text-shadow: 0 0 1px $slide3TopTextClr;
        color: $slide3TopTextClr;
      }
    }
    &-bot {
      &-h {
        text-shadow: 0 0 1px $slideBotTextClr;
        color: $slideBotTextClr;
      }
    }
    &-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translateY(-45%);
      opacity: 0;
      transition: transform $contSpeed 0s, opacity $contSpeed 0s, z-index 0s 2.2s;
      @include mediaMaxW(1366px) {
          left: 60%;
        }
      &-image {
        width: 500px;
        @include mediaMaxH(730px) {
          width: 400px;
        }
        @include mediaMaxW(1366px) {
          width: 400px;
        }
      }
    }
  }
  ////////////// Slide 4 ////////////////
  &__slide--4 {
    &-top {
      &-h {
        &-link {
          position: relative;
          text-decoration: none;
          text-shadow: 0 0 1px $slide4TopTextClr;
          color: $slide4TopTextClr;
        }
      }
    }
    &-bot {
      &-h {
        &-link {
          text-decoration: none;
          text-shadow: 0 0 1px $slideBotTextClr;
          color: $slideBotTextClr;
          z-index: 20;
        }
      }
    }
  }
//////////////// Nav Sidebar //////////////
  &__nav {
    position: fixed;
    // top: 50%;
    // right: 2%;
    bottom: 3%;
    left: 50%;
    transform: translateX(-50%);
    &-list {
      list-style-type: none;
    }
    &-item {
      display: inline-block;
      position: relative;
      margin-left: 8px;
      width: 20px;
      height: 20px;
      border-radius: 50%;
      border: 2px solid #e5e5e5;
      cursor: pointer;
      &:after {
        content: ' ';
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) scale(0, 0);
        width: 75%;
        height: 75%;
        border-radius: 50%;
        background: #e5e5e5;
        transition: 300ms;
        opacity: 0;
        overflow: hidden;
      }
      &:hover:after {
        transform: translate(-50%, -50%) scale(1, 1);
        opacity: 1;
      }
    }
    &-item--1 {
      margin-left: 0;
    }
    &-scroll {
      position: absolute;
      top: 1px;
      transform: rotate(-45deg);
      width: 17px;
      height: 17px;
      border: 2px solid #e5e5e5;
      border-right: transparent;
      border-bottom: transparent;
      cursor: pointer;
      transition: 300ms;
      &:hover {
        transform: rotate(-45deg) scale(1.2, 1.2);
      }
      &--goup {
        left: -20px;
      }
      &--godown {
        transform: rotate(-225deg);
        right: -20px;
        &:hover {
          transform: rotate(-225deg) scale(1.2, 1.2);
        }
      }
    }
  }
}

.nav-active {
  &:after {
    transform: translate(-50%, -50%) scale(1, 1);
    opacity: 1;
  }
}

.active {
  //////////// Slides Left /////////////
  .active-slide-left-top {
    transform: translate(640px, 0) rotate(25deg);
    transition: transform $topSpeed cubic-bezier(0, 0, 0.21, 1.02);
  }
  .active-slide-left-bot {
    transform: translateX(800px) rotate(-45deg);
    transition: transform $bot-TextSpeed $showDelay;
  }
  .active-slide-left-content {
    transform: translateY(-50%);
    opacity: 1;
    transition: transform $bot-TextSpeed $textShowDelay, opacity $bot-TextSpeed $textShowDelay;
  }

  ///////////// Slides Right /////////////
  .active-slide-right-top {
    transform: translateX(-585px) rotate(-25deg);
    transition: transform $topSpeed;
  }
  .active-slide-right-bot {
    transform: translateX(-800px) rotate(45deg);
    transition-delay: $showDelay;
  }
  .active-slide-right-content {
    transform: translate(-95%, -50%);
    opacity: 1;
    z-index: 10;
    transition: transform $contSpeed $textShowDelay, opacity $contSpeed $textShowDelay, z-index 0s 1s;
  }

  /////////// Slide 1 ////////////
  .active-slide1-top-text {
    transform: translate(75px, -282px) rotate(-45deg);
    transition: transform $bot-TextSpeed $textShowDelay;
  }
  .active-slide1-bot-text {
    transform: translate(-117px, 31px) rotate(45deg);
    transition: transform $bot-TextSpeed $textShowDelay;
  }

  ////////////// Slide 2 /////////////
  .active-slide2-top-text {
    transform: translate(-43px, -219px) rotate(45deg);
    transition-delay: $textShowDelay;
  }

  .active-slide2-bot-text {
    transform: translate(127px, -116px) rotate(-45deg);
    transition-delay: $textShowDelay;
  }

  ////////////// Slide 3 /////////////
  .active-slide3-top-text {
    transform: translate(54px, -241px) rotate(-45deg);
    transition: transform $bot-TextSpeed $textShowDelay;
  }
  .active-slide3-bot-text {
    transform: translate(-190px, 43px) rotate(45deg);
    transition: transform $bot-TextSpeed $textShowDelay;
  }

  ////////////// Slide 4 /////////////
  .active-slide4-top-text {
    transform: translate(-55px, -231px) rotate(45deg);
    transition: transform $bot-TextSpeed $textShowDelay;
  }
  .active-slide4-bot-text {
    transform: translate(127px, -116px) rotate(-45deg);
    transition: transform $bot-TextSpeed $textShowDelay;
  }
}