Переход от одного изображения к другому

Nick4343

Добрый день всем. Недавно на одном сайте наткнулся на такой эффект: есть две фото и посередине ползунок для перетягивания в разные стороны. Как это называется и как реализовать такое?
2 ответа

Nick4343

Nick4343, делал что-то подобное, но с помощью JS.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="14.js" defer></script>
    <link rel="stylesheet" href="14.css" id="">
</head>
<body>
<div id="main">
    <div id= "before" ><img src="do_3.jpg"></div>
    <div id = "after" ><img src="posle.jpg">  </div>
</div>
</body>
</html>
#main{
    width: 334px;
    height: 392px;
    border: solid black 2px;
    position: relative;
    overflow: hidden;
    
}
#before, #after {
    width: 334px;
    height: 392px;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden;
}
document.getElementById ("body").onmousemove = function (event){
    var x = event.offsetX;
    document.getElementById("after").style.width = x + "px";
}
document.getElementById ("body").onmouseleave = function (event){
    document.getElementById("after").style.width = "375px";
}


Nick4343

Уже нашел что-то подобное — слайдер сравнения изображений. Для Wordpress есть несколько плагинов