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 Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Looking for quick-add? Try the external resource search, it's quicker and gives you access to the most recent version of thousands of libraries. ☝️

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

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
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console