Before and after image slider

Before and after image slider.markdown

Before and after image slider

Saw this on my favorite agency site and decided to replicate the effect: http://www.teehanlax.com/story/readability/

Forked from ace's Pen Before and after image slider.

A Pen by Captain Anonymous on CodePen.

License.

index.html

<div class="before_after_slider">
  <div class="color">
    <img src="http://i.imgur.com/5AlZEjR.jpg" width="1920" height="1080" alt="" />
  </div>
  <div class="black_white">
    <img src="http://i.imgur.com/7jN1ACe.jpg" width="1920" height="1080"  alt="black_white" />
  </div>
</div>

script.js

var $black_white = $('.black_white'),
		img_width = $('.black_white img').width(),
		init_split = Math.round(img_width/2);
  
  $black_white.width(init_split);  

		$('.before_after_slider').mousemove(function(e){
		var offX  = (e.offsetX || e.clientX - $black_white.offset().left);
			$black_white.width(offX);
		});

		$('.before_after_slider').mouseleave(function(e){
		$black_white.stop().animate({
		width: init_split
		},1000)
		});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

@import "compass/css3";

.before_after_slider {
  position: relative;
  margin: 0;
  width: 100%;
  height: 100%;
  & > * {
    position: absolute;
  }
}

.black_white {
  overflow: hidden;
}