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

Question

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

Navigation

#1 by (4 votes)
#2 by (4 votes)

7

I need to make an effect like this example :

WhatIrealizedbypassingthedebugisthattwoimagesareonedivwithintheother:

<divclass="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 the javascript is done to make the effect, has anyone done something like this?

javascript html

asked by anonymous 23.07.2015 / 15:11

2 answers

4

Come on, there's a jQuery plugin here .

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

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

And then call it after the page loads:

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

A link to quote sources:

link

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><scriptsrc="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><divid='container1'class='twentytwenty-container'><imgsrc='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>

23.07.2015 / 16:46

How to create a system to generate hashes and be able to break without the original string? Deleting data automatically after a certain time

score 4 · Accepted Answer

I've been playing around with the idea and it's not that difficult.

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

jsFiddle: link

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>