Interesting effect

[mikethetiger]

Hi.

Found this interesting image with a cool effect - http://image.prntscr.com/image/e63684ff68b3457d8483a4175883587c.png
(See it here https://www.artec3d.com/3d-software/artec-studio#whats-new )

If you move the mouse cursor from the left side of this picture to the right one, this picture will be interchanged by another one. Where the first one shows the model made by previous version of this soft, and the second one - the newest version.

I’d like use this feature on my own site as well. Maybe you can give me some clues how to implement it on my site.

Thanks in advance.

[PaulOB]

Hi,

I didn’t look at the code at all but you could do something in css like this for modern browsers.

http://www.pmob.co.uk/temp2/hover-switch.html

The css and html is all in the head so just view source (bear in mind I just knocked this up in 5 minutes so could be greatly improved upon).

I’ve also put it in a codepen if you want to play around with it:

The example you linked to is obviously using a script for the drag effect and if you want that exact functionality then it will need to be scripted.

[PaulOB]

Here’s a simpler example that uses jquery to change the split of the image.

[mikethetiger]

Thank’s

[liontas76]

the js function that do this job is this:

function moveHandle(e) {
    var divider = $(this).find('.as11-compare-divider');

    var touch = e.pageX || e.touches[0].pageX;

    var position = touch - $(this).offset().left;
    if (position < $(this).width() && position > 0) {
      divider.css("left", position);

        var width = $(this).width() - divider.position().left;
        $(this).find('.as11-compare-right').width(width);
    }
  }