Image Comparison Slider

Image-Comparison-Slider.markdown

Image Comparison Slider

Drag the slider to compare the images.

Was using Flipboard on my iPad and that had this cool image comparison slider. I decided to create one of my own.

The images are Dubai, UAE, 1990-2013.

There is a little problem that occurs, the jQuery drag does not fire the drag event every pixel. So if you move fast it can't keep up with it leaving the image behind the handle. Not sure how to get around this one.

A Pen by Alex Rutherford on CodePen.

License.

index.html

<h1>Image Comparison Slider</h1>
<div class="con">
  <img src="http://i59.tinypic.com/21np5rd.jpg" class="imageOne" />
  <div class="coverImage"></div>
  <div class="handle"></div>
</div>

script.js

$(".handle").draggable({ 
  axis: "x",
  containment: "parent",
  drag: function() {
    var position = $(this).position();
    var positionExtra = position.left + 6;
    $(".coverImage").width(positionExtra + "px");
  }
});

style.css

@import url(http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900);

body {
  background: #222;
  font-family:'Lato', sans-serif;
}
h1 {
  font-weight: 100;
  color: #fff;
  text-align: center;
}
.con {
  width: 562px;
  height: 300px;
  border: 2px solid ;
  position: relative;
  margin: auto;
}
.con img {
  height: 100%;
  object-fit: cover;
  position: absolute;
}
.coverImage {
  position: absolute;
  background: url("http://i60.tinypic.com/210hgjp.jpg");
  background-size: auto 100%;
  width: 50%;
  height: 100%;
}
.handle {
  width: 0px;
  height: 100%;
  border-left: 12px solid #fff;
  position: absolute;
  left: 50%;
}
.handle:after {
  content: "DRAG";
  display: block;
  width: 60px;
  height: 60px;
  border: 2px solid #eee;
  border-radius: 50%;
  color: #999;
  line-height: 60px;
  font-weight: 300;
  text-align: center;
  background: #fff;
  position: absolute;
  left: -36px; top: 0; bottom: 0;
  margin: auto;
}