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.
Created
August 1, 2015 14:52
-
-
Save andreabadesso/64314b7d31440ee3cdb2 to your computer and use it in GitHub Desktop.
Before and after image slider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| 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) | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| @import "compass/css3"; | |
| .before_after_slider { | |
| position: relative; | |
| margin: 0; | |
| width: 100%; | |
| height: 100%; | |
| & > * { | |
| position: absolute; | |
| } | |
| } | |
| .black_white { | |
| overflow: hidden; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment