css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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

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

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="demo-container">
  <div class="slides">
    <div class="slide slide-1">
      <div class="bg bg-1">
        <div class="overlay">Slide #1</div><span class="hint">Navigate by dragging/swiping...</span>
      </div>
    </div>
    <div class="slide slide-2">
      <div class="bg bg-2">
        <div class="overlay">Slide #2</div><span class="hint">...or by pressing the keyboard arrows...</span>
      </div>
    </div>
    <div class="slide slide-3">
      <div class="bg bg-3">
        <div class="overlay">Slide #3</div><span class="hint">...or by clicking the circles down below, <br> or just wait.</span>
      </div>
    </div>
    <div class="slide slide-4">
      <div class="bg bg-4">
        <div class="overlay">Slide #4    </div>
      </div>
    </div>
    <div class="slide slide-5">
      <div class="bg bg-5">
        <div class="overlay">Slide #5. Check out my other <a href = "https://codepen.io/kiyutink/" target = "_blank">pens</a> and follow me on <a href = "https://twitter.com/kiyutin_k" target = "_blank">twitter</a>.</div>
      </div>
    </div>
  </div>
  <div class="slide-indicator">
    <div class="dot dot-1" where="1"></div>
    <div class="dot dot-2" where="2"></div>
    <div class="dot dot-3" where="3"></div>
    <div class="dot dot-4" where="4"></div>
    <div class="dot dot-5" where="5"></div>
  </div>
  <div class="property-hack"></div>
</div>
            
          
!
            
              *, *:before, *:after
 box-sizing: border-box
 margin: 0
 padding: 0
$animationTime: 0.5 //sets the animation time and delay of overlay apearance(in seconds)
$numberOfSlides: 5 //just add new slides in html and change this value
$k: 2 //defines how much slower slides move compared to the cursor
$autochangeTime: 8 //time-delay between automatic slide changes (in seconds)
.property-hack
 display: none
 width: $k * 100 + px
 height: $animationTime * 1000 + px
 margin-left: $autochangeTime * 1000 + px
.demo-container
 width: 100vw
 height: 100vh
 overflow: hidden
 user-select: none
 cursor: grab
 background: #333
.slides
 width: 100% * $numberOfSlides
 height: 100%
 transform: translate3d(0, 0, 0)
.slide
 width: 100vw
 height: 100%
 float: left
 overflow: hidden
 position: relative
.bg
 width: 100%
 height: 100%
 background-position: center
 background-size: cover
.bg-2
 transform: translate3d(-50vw, 0, 0)
.animation
 transition: transform $animationTime + s ease
@for $i from 1 through $numberOfSlides
 .bg-#{$i}
  background-image: url("https://kiyutink.github.io/nyc/nyc#{$i}.jpg")
.grabbing
 cursor: grabbing
.slide-indicator
 position: fixed
 left: 50%
 bottom: 8px
 transform: translateX(-50%)
 width: $numberOfSlides * 14px + 20px
 height: 14px + 20px
 -webkit-tap-highlight-color: transparent
 z-index: 5
 padding: 10px
 cursor: default
.dot
 width: 10px
 height: 10px
 border-radius: 50%
 margin: 2px
 float: left
 background: white
 opacity: 0.3
 transition: opacity $animationTime + s ease
 cursor: pointer
.dot-1
 opacity: 1
.overlay
 width: 100vw
 height: 75px
 position: fixed
 bottom: 0
 background: rgba(0, 0, 0, 0.6)
 color: white
 font-family: "Bad Script", sans-serif
 font-size: 1.5rem
 text-align: center
 transform: translate3d(0, 100%, 0)
 will-change: transform
 transition: transform $animationTime + s ease, opacity $animationTime + s ease
 transition-delay: $animationTime + s
 opacity: 0
.overlay-active
 transform: translate3d(0, 0, 0)
 opacity: 1
.hint
 background: transparent
 position: absolute
 top: 10%
 width: 100%
 text-align: center
 font-family: "Bad Script", sans-serif
 color: white
 font-size: 1.2rem
 z-index: 1
a
 color: white
@media (max-width: 360px)
 .slide-indicator
  display: none
 .overlay
  font-size: 1rem
            
          
!
            
              //the quality of the following code is not the best as i was writing it shortly after i just got into coding. This should really be refactored but unfortunately i don't have time to do it. So if you want to try and understand what happens in the code, i'm sorry in advance
$(document).ready(function() {
 var curX = 0;
 var diff = 0;
 var curSlide = 1;
 var busy = false;
 var flag = false;
 var winW = parseInt($(".demo-container").css("width"));
 var animationTime = parseFloat($(".property-hack").css("height"));
 var k = parseFloat($(".property-hack").css("width")) / 100;
 var numOfSlides = $(".slide").length;
 var autoChangeTime = parseFloat($(".property-hack").css("margin-left"));
 var autoChangeInterval = setInterval(autoChangeFunction, autoChangeTime);
 $(".slide-1 .overlay").addClass("overlay-active");
 $(window).on("keydown", function(event) {
  if (!busy) {
   if (event.which == 37 && curSlide >= 2) {
    curSlide--;
    animation();
   }
   if (event.which == 39 && curSlide < numOfSlides) {
    curSlide++;
    animation();
   }
  }
 });
 $(".dot").on("click", function() {
  if (!busy) {   
   curSlide = parseInt($(this).attr("where"));
   animation(true);   
  }
 });
 $(document).on("mousedown touchstart", ".slides", function(event) {
  if (!busy) {
   clearInterval(autoChangeInterval);
   flag = true;
   $(".demo-container").addClass("grabbing");
   winW = parseInt($(".demo-container").css("width"));
   if (event.originalEvent.touches) var stX = event.originalEvent.touches[0].pageX;
   else var stX = event.pageX;
   $(document).on("mousemove touchmove", function(event) {
    if (busy) return;
    if (event.originalEvent.touches) var msX = event.originalEvent.touches[0].pageX;
    else var msX = event.pageX;
    diff = (msX - stX) / winW * 100 / k;
    if (diff > 110) diff = 110;
    if (diff < -110) diff = -110;
    if (curSlide == 1) {
     if (diff > 0) diff /= 10;
     if (diff > 5) diff = 5;
    }
    if (curSlide == numOfSlides) {
     if (diff < 0) diff /= 10;
     if (diff < -5) diff = -5;
    }
    $(".slides").css("transform", "translate3d(" + (diff + curX) + "vw, 0, 0)");
    $(".bg-" + curSlide).css("transform", "translate3d(" + (-diff / 2) + "vw, 0, 0)");
    $(".bg-" + (curSlide + 1)).css("transform", "translate3d(" + (-50 - diff / 2) + "vw, 0, 0)");
    $(".bg-" + (curSlide - 1)).css("transform", "translate3d(" + (50 - diff / 2) + "vw, 0, 0)");
   });
  }
 });
 $(document).on("mouseup touchend", function(event) {
  if (flag) {
   if (diff * k < -30) curSlide++;
   else if (diff * k > 30)
    curSlide--;
   animation();
   diff = 0;
   $(document).off("mousemove touchmove");
   $(".demo-container").removeClass("grabbing");
   flag = false;
  }
 });

 function animation(r) {
  busy = true;
  curX = (-curSlide + 1) * 100;
  $(".overlay").removeClass("overlay-active");  
  $(".slide-" + curSlide + " .overlay").addClass("overlay-active");
  $(".dot").css("opacity", "0.3");
  $(".dot-" + curSlide).css("opacity", "1");
  $(".slides").addClass("animation");
  if (!r)  $(".bg").addClass("animation");
  else $(".bg").css("transform", "translate3d(0, 0, 0)");
  $(".slides").css("transform", "translate3d(-" + (curSlide - 1) * 100 + "vw, 0, 0)");
  $(".bg").css("transform", "translate3d(0, 0, 0)");
  if (!r) {
   $(".bg-" + (curSlide + 1) + ", .bg-" + (curSlide + 2)).css("transform", "translate3d(-50vw, 0, 0)");
   $(".bg-" + (curSlide - 1) + ", .bg-" + (curSlide - 2)).css("transform", "translate3d(50vw, 0, 0)");
  }
  clearInterval(autoChangeInterval);
  setTimeout(function() {
   $(".slides, .bg").removeClass("animation");
   busy = false;
   $(".bg-" + (curSlide + 1)).css("transform", "translate3d(-50vw, 0, 0)");   
   autoChangeInterval = setInterval(autoChangeFunction, autoChangeTime);
  }, animationTime);
 }

 function autoChangeFunction() {
  if (curSlide != numOfSlides) {
   curSlide++;
   animation();
  }
  else {
   curSlide = 1;
   animation(true);
  }
 }
});
            
          
!
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