Full-page photo slider

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Full-page photo slider</title>
  <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<meta name="viewport" content="width=device-width, initial-scale=1">

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

.demo-container {
  width: 80vw;
  height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
  cursor: -webkit-grab;
  cursor: grab;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
}

a {
  color: white;
}

.transparent-bg {
  width: 100vw;
  height: 100vh;
  background-position: center;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}

.trans-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  opacity: 0;
  background-size: cover;
  background-position: center;
  left: 0;
  top: 0;
  transition: all 0.3s linear;
  will-change: opacity;
  transform: translate3d(0, 0, 0);
}

.grabbing {
  cursor: -webkit-grabbing;
  cursor: grabbing;
}

.trans-bg-active {
  opacity: 0.35;
}

.photo-container {
  position: relative;
}

.photo {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  border-radius: 4px;
  position: absolute;
  opacity: 0;
  transform: translate3d(105vw, 0, 0);
  will-change: transform, opacity;
  z-index: 1;
  color: white;
  font-family: "Montserrat", sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}

.caption {
  background: rgba(0, 0, 0, 0.7);
  padding: 5px;
  border-radius: 4px;
  font-size: 1.3rem;
}

.photo-0 {
  background-image: url(https://kiyutink.github.io/madrid/madrid2.jpg);
}

.photo-1 {
  background-image: url(https://kiyutink.github.io/moscow/moscow2.jpg);
}

.photo-2 {
  background-image: url(https://kiyutink.github.io/nyc/nyc2.jpg);
}

.photo-3 {
  background-image: url(https://kiyutink.github.io/london/london2.jpg);
}

.photo-4 {
  background-image: url(https://kiyutink.github.io/beijing/beijing2.jpg);
}

.photo-5 {
  background-image: url(https://kiyutink.github.io/beijing/beijing3.jpg);
}

.photo-active {
  transform: none;
  opacity: 1;
}

.photo-left {
  transform: translate3d(-105vw, 0, 0);
}

.animation {
  transition: all 0.3s ease-out;
}

.indicator {
  position: absolute;
  top: 100%;
  left: 50%;
  text-align: center;
  font-family: "Montserrat", sans-serif;
  transform: translate(-50%, -102%);
  padding: 2px;
  border-radius: 4px;
  z-index: 2;
  background: rgba(0, 0, 0, 0.6);
  color: white;
}

@media only screen and (max-width: 360px) {
  .caption {
    font-size: 0.9rem;
  }
}

</style>
</head>
<body>

<div class="demo-container">
  <div class="transparent-bg"></div>
  <div class="photo-container">
    <div class="photo photo-active photo-0">
      <div class="caption">
        Navigate by dragging
      </div>    
    </div>
    <div class="photo photo-1"></div>
    <div class="photo photo-2"></div>
    <div class="photo photo-3"></div>
    <div class="photo photo-4">
      <div class="caption">
        Check out my other <a href="https://codepen.io/kiyutink/" target="_blank">pens</a>
      </div>
    </div>
    <div class="photo photo-5">
      <div class="caption">
        Follow me on <a href="https://twitter.com/kiyutin_k" target="_blank">twitter</a>
      </div>
    </div>
    <div class="indicator"></div>
  </div>
</div>

  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
  
  <script>
  
  $(document).ready(function() { 
  var winW = null;
  var winH = null;
  var phW = null;
  var phH = null;
  var ms = {
    x: 0,
    y: 0
  }
  var curPhoto = 0;
  var numOfPhotos = $(".photo").length;
  
  function loadBg(photoNum) {
    var url = $(".photo-" + photoNum).css("background-image");
    $(".transparent-bg").append("<div class='trans-bg trans-bg-" + photoNum + "'></div>");
    $(".trans-bg").last().css("background-image", url);
  }
  
  function handleSize() {
    winW = parseInt($(".demo-container").css("width"));
    winH = parseInt($(".demo-container").css("height"));   
    var k = 0.9;
    if (winW / 16 < winH / 9)
      $(".photo-container").css({
        "width": winW * k + "px",
        "height": winW * k * 9 / 16 + "px" });
    else 
      $(".photo-container").css({
        "height": winH * k + "px",
        "width": winH * k * 16 / 9 + "px"
      });
    phW = parseInt($(".photo").css("width"));
    phH = parseInt($(".photo").css("height"));
    $(".photo-container").css("perspective", (phW + phH) * 2);
  }
 
  $(".indicator").html((curPhoto + 1) + "/" + numOfPhotos);
  
  for (i = 0; i < numOfPhotos; i++)
    loadBg(i);
  $(".trans-bg-0").addClass("trans-bg-active");
  handleSize();
  
  $(window).on("resize", handleSize);
  
  $(".demo-container").on("mousedown touchstart", function(event) {
    if (event.type == "touchstart") {
      event.preventDefault();
      var st = {
        x: event.originalEvent.touches[0].pageX,
        y: event.originalEvent.touches[0].pageY
      }
    } else {
       var st = {
      x: event.pageX,
      y: event.pageY
    }
    }
    
    $(".demo-container").addClass("grabbing").find(".photo").removeClass("animation");
   
    $(".demo-container").on("mouseleave", function() {
      $(document).trigger("mouseup");
    });
    $(document).on("mousemove touchmove", function(event) {
      ms.x = (event.pageX || event.originalEvent.touches[0].pageX) - st.x;
      ms.y = (event.pageY || event.originalEvent.touches[0].pageY) - st.y;
      $(".photo-active").css("transform", "rotateX(" + Math.atan(-ms.y / phH) * 57.3 + "deg) rotateY(" + Math.atan(ms.x / phW) * 57.3 + "deg) translate3d(" + ms.x / 2.5 + "px, " + ms.y / 2.5 + "px, 0)");
    });
  });
  $(document).on("mouseup touchend", function(event) {
    $(".demo-container").removeClass("grabbing").find(".photo").addClass("animation");    
    $(document).off("mousemove touchmove");
    if (ms.x < -winW / 5 && curPhoto < numOfPhotos - 1) {
      curPhoto++;
      $(".photo-active").removeAttr("style").removeClass("photo-active").addClass("photo-left");
      $(".photo-" + curPhoto).addClass("photo-active");
      $(".trans-bg").removeClass("trans-bg-active");
      $(".trans-bg-" + curPhoto).addClass("trans-bg-active");
      $(".indicator").html((curPhoto + 1) + "/" + numOfPhotos)
    }
    else if (ms.x > winW / 5 && curPhoto > 0) {
      curPhoto--;
      $(".photo-active").removeAttr("style").removeClass("photo-active");
      $(".photo-" + curPhoto).addClass("photo-active").removeClass("photo-left");
      $(".trans-bg").removeClass("trans-bg-active");
      $(".trans-bg-" + curPhoto).addClass("trans-bg-active");
      $(".indicator").html((curPhoto + 1) + "/" + numOfPhotos)
    }
    else {
      $(".photo-active").removeAttr("style");
    }
    ms.x = 0;
    ms.y = 0;
  });
});
  </script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Full-page photo slider