Div effect to show two, half-to-half images

Question

I need to do an effect like this example:

What I noticed by debugging is that there are two images one div inside the other:

<div class="box-image-differ" style="width: 620px; height: 366px;">
    <img src="http://f.i.uol.com.br/folha/ilustrada/images/15203312.jpeg" onload="folha.media.fotoAB.ok( this , '#imagediffer0' )">
    <div class="box-image-differ-ui ui-resizable" style="height: 366px; width: 318px;">
        <div class="box">
            <img src="http://f.i.uol.com.br/folha/ilustrada/images/15203326.jpeg" onload="folha.media.fotoAB.ok( this , '#imagediffer0' )">
        </div>
        <div class="ui-resizable-handle ui-resizable-e" style="z-index: 90; height: 366px;"></div>            
    </div>        
</div>

But I could not understand how javascript is done to do the effect, someone has done something like this?

Answer 1

Come on, there’s a plugin for jQuery here.

To use it just place the two images inside a div:

<div id="container1">
  <img src="sample-before.png">
  <img src="sample-after.png">
</div>

And then call you after the page is loaded:

$(window).load(function() {
  $("#container1").twentytwenty();
});

A link to cite the sources:

http://zurb.com/playground/twentytwenty

---

Example:

$(window).load(function() {
  $("#container1").twentytwenty();
});

<link href="http://zurb.com/playground/uploads/upload/upload/93/twentytwenty.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="http://zurb.com/playground/uploads/upload/upload/91/jquery.event.move.js"></script>
<script src="http://zurb.com/playground/uploads/upload/upload/92/jquery.twentytwenty.js"></script>

<div id='container1' class='twentytwenty-container'>
  <img src='http://www.revolucaodigital.net/wp-content/uploads/2011/03/chrome-logo-500x500.jpg?d01e53' style="width:300px;">
  <img src='http://www.vectorfree.com/media/vectors/firefox-icon.jpg' style="width:300px;">
</div>

Answer 2

I’ve been toying with the idea and it’s not so hard.

Having two Divs on top of each other, one with superior z-index to be "on top". Then listening to the e.pageX (for example in a div with slider function) you can take the mouse position on the X axis.

jsFiddle: http://jsfiddle.net/6s6wvk3f/1/show

var slider = document.getElementById('slider');
var cima = document.getElementById('cima');

// posicionar slider
var sliderWidth = slider.getBoundingClientRect().width;
var cimaWidth = cima.getBoundingClientRect().width;
slider.style.left = cimaWidth - (sliderWidth / 2) + 'px';

// arrastar slider
var ativo = false;
var offset = 0;

function toggleAtivo(e) {
    if (e.target != slider) return;
    ativo = (e.type == 'mousedown');
    var sliderPosition = slider.getBoundingClientRect().left;
    offset = sliderPosition - e.pageX;
}
window.addEventListener('mousedown', toggleAtivo);
window.addEventListener('mouseup', toggleAtivo);
window.addEventListener('mousemove', function (e) {
    if (!ativo) return;
    cima.style.width = e.pageX + 'px';
    slider.style.left = (e.pageX + offset) + 'px';
});

#container > div {
    border: 1px solid #ccf;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
#cima {
    width: 285px;
    z-index: 1;
}
#baixo {
    width: 570px;
}
#slider {
    position: absolute;
    z-index: 2;
    top: 100px;
    background-color: #ccf;
    padding: 10px;
    border-radius: 10px;
}

<div id="wrapper">
    <div id="slider">
        &lt;slider&gt;
    </div>
    <div id="container">
        <div id="cima">
            <img src="https://www.google.com/logos/2014/halloween14/2.gif" alt="" />
        </div>
        <div id="baixo">
            <img src="https://www.google.com/logos/2014/halloween14/4.gif" alt="" />
        </div>
    </div>
</div>