cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

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

            
          
!
            
              $(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');
    }
  });
});
            
          
!
999px
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console