Показать сообщение отдельно
  #2 (permalink)  
Старый 19.08.2017, 17:55
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,064

фото до и после, полноэкраннная версия
WhiteFox,
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>demo</title>
  <style type='text/css'>
 html, body{
   height: 100%;
   margin: 0;
   padding: 0;
 }
.container {
    width: 100%;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.container > .top , .container > .bottom{
    height: 100%; width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: auto;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url(http://s00.yaplakal.com/pics/pics_preview/6/1/9/9965916.jpg);
}

 .container > .bottom{
    background-image: url(http://s00.yaplakal.com/pics/pics_preview/7/1/9/9965917.jpg);
 }

.container > .bar {

    height: 100%;
    width: 3px;
    position: absolute;
    top: 0px;
    left: 50%;
    cursor: move;
}

.container > .bar:after{
 cursor: move;
 width: 40px;
 height: 40px;
 position: absolute;
 top: 48%;
 left: -20px;
 content: "";
 border-radius: 20px;
 background-color: hsla(217, 89%, 61%, .5);
}

  </style>



<script>
window.addEventListener("DOMContentLoaded", function() {
    var mousedown = "mousedown",
        mousemove = "mousemove",
        mouseup = "mouseup";
    var touch = !!("ontouchstart" in window);
    if (touch) mousedown = "touchstart", mousemove = "touchmove", mouseup = "touchend";
    [].forEach.call(document.querySelectorAll(".container"), function(container) {
        var bottom = container.querySelector(".bottom"),
            bar = container.querySelector(".bar"),
            left, h = container.clientHeight,
            w = container.clientWidth;
        var init = function(e) {
            e.preventDefault();
            touch && (e = e.changedTouches[0]);
            left = e.clientX - this.offsetLeft;
            h = container.clientHeight;
            w = container.clientWidth;
            clip(left);
            container.addEventListener(mousemove, move, true);
            window.addEventListener(mouseup, stop, true)
        };
        var move = function(e) {
            touch && (e = e.changedTouches[0]);
            var x = e.clientX - this.offsetLeft;
            x = Math.min(w, Math.max(0, x));
            clip(x)
        };
        var clip = function(left) {
            bottom.style.clip = "rect(0," + left + "px," + h + "px,0)";
            bar.style.left = left + "px"
        };
        clip(w / 2);
        var stop = function(e) {
            container.removeEventListener(mousemove, move, true);
            window.removeEventListener(mouseup,
                stop, true)
        };
        container.addEventListener(mousedown, init, true);
        window.addEventListener("resize", function() {
        clip(container.clientWidth / 2);
}, true);
    })
});
</script>


</head>
<body>
  <div class="container">
    <div class="top"></div>
    <div class="bottom"></div>
    <div class="bar"></div>
</div>
 <div class="container">
    <div class="top" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/4/2/9/9965924.jpg)"></div>
    <div class="bottom" style="background-image: url(http://s00.yaplakal.com/pics/pics_preview/5/2/9/9965925.jpg)"></div>
    <div class="bar"></div>
</div>
</body>


</html>
Ответить с цитированием