3

Как сделать такой эффект с фотографией, чтобы можно было тянуть за линию влево и вправо? С одной стороны фотография черно белая, а с другой цветная.

введите сюда описание изображения

1

3 ответа 3

9

Две картинки, одна поверх другой:

(function bubu() {
  var width = 500;
  var height = 250;
  var lineWid = 6;

  var img = {
    right: document.querySelector('.image-right'),
    left: document.querySelector('.image-left')
  };

  setSizes();
  setEventListeners();

  /***/

  function setSizes() {
    img.right.style.width = width + 'px';
    img.right.style.height = height + 'px';
    img.right.style.backgroundSize = width + 'px ' + height + 'px';

    img.left.style.width = width / 2 + 'px';
    img.left.style.height = height + 'px';
    img.left.style.backgroundSize = width + 'px ' + height + 'px';
    
    document.querySelector('.line-separator').style.width = lineWid + 'px';
  }

  function setEventListeners() {
    var line = document.querySelector('.line-separator');
    
    var offsetLeft = img.left.getBoundingClientRect().left;    
    var grabbing = false;

    line.addEventListener('mousedown', function() {
      grabbing = true;
    });

    document.addEventListener('mouseup', function() {
      grabbing = false;
    });

    document.addEventListener('mousemove', function(e) {
      if (!grabbing) return;
      
      var linePos = e.pageX - offsetLeft + lineWid/2;
      // e.pageX: Текущая координата мышки
      img.left.style.width = Math.min( Math.max(linePos, lineWid), width ) + "px";
      // Не больше width, не меньше ширины линии
    });
  }
})();
.mama {
  position: relative;
}

.image-right, .image-left {
  position: absolute;
  background-image: url('https://i.gyazo.com/3d639982375790f7d875454a5850c5e8.png');
}

.image-left {
  overflow: hidden;
  filter: grayscale();
}

.line-separator {
  position: absolute;
  background-color: #222;
  width: 4px;
  height: 100%;
  right: 0;
  cursor: grab;
}

.line-separator:active {
  cursor: grabbing;
}
<div class="mama">
  <div class="image-right"></div>
  <div class="image-left">
    <div class="line-separator"></div>
  </div>
</div>

1
  • 4
    P.s. превратил девушек в котиков... на чистом CSS !)) 28 мар 2020 в 17:34
8

Что-то коллеги тут перестарались со скриптами. Вот две строчки на CSS :))

.image {display: inline-block; position: relative; line-height: 0;}

.image>div {position: absolute; overflow: hidden; box-sizing: border-box; top: 0; left: 0; bottom: 0; width: 10%; max-width: 100%; border-right: 2px solid; resize: horizontal; filter: grayscale(1);}
<div class="image">
  <div><img src="https://24.kz/media/k2/items/cache/d73bdd80d92870b5f02033844c11a7d5_Generic.jpg" /></div>
  <img src="https://24.kz/media/k2/items/cache/d73bdd80d92870b5f02033844c11a7d5_Generic.jpg" />
</div>

3
  • 3
    каждый день узнаешь что-то новое, +1, никогда такого не видел)
    – meine
    30 мар 2020 в 9:02
  • 2
    Цитата из вопроса «...чтобы можно было тянуть за линию влево и вправо...» поэтому перестарались) Пользователь легко может не додуматься, что кликать надо где-то внизу. Хотя идея прикольная) 30 мар 2020 в 9:59
  • 3
    @Sevastopol' АХахах здорово! )))
    – Denis640Kb
    30 мар 2020 в 18:12
0

Можно добавить div сверху и указать у него режим ЧБ и по движению бегунка менять его ширину

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .imgContainer{
            width: 500px;
            height: 500px;
            background-size: cover; 
        }

    </style>
</head>
<body>
    <script>
        let isTaken = false; // была ли нажата кнопка мыши
        let img = 'https://hackeru.pro/uploads/Banner/110/image/01_1985ef16f2.png';
        let body = document.body;

        // создание самой картинки
        imgElem = document.createElement('div');
        imgElem.classList.add('imgContainer')
        imgElem.style.position = 'relative';
        imgElem.style.backgroundImage = "url('"+img+"')";
        body.appendChild(imgElem);

        // создание ЧБ экрана
        let screen = document.createElement('div');
        screen.style.position = 'absolute';
        screen.style.width = '50%';
        screen.style.height = '100%';
        screen.style.left = '0';
        screen.style.top = '0';
        screen.style.backdropFilter = 'grayscale(100%)';
        imgElem.appendChild(screen);

        //создание линии
        let line = document.createElement('div');
        line.style.backgroundColor = 'green';
        line.style.position = 'absolute';

        line.style.width = '3px';
        line.style.height = '100%';
        line.style.left = '50%';
        line.style.top = '0';
        line.style.cursor = 'pointer';
        line.style.zIndex = 10;
        imgElem.appendChild(line);

        // включение режима передвижения ширмы
        imgElem.addEventListener('mousedown', function(){
            isTaken = true;
        })
        // выключение режима передвижения ширмы
        imgElem.addEventListener('mouseup', function(){ 
            isTaken = false;
        })

        //обработка движения мышью
        imgElem.addEventListener('mousemove', function(event){
            if (!isTaken) return //проверка включенности режима пережвижения ширмы

            line.style.left = event.screenX + 'px';
            screen.style.width = event.screenX + 'px'

            // в случае, если мы зашли за пределы экрана режим выключается
            if (line.offsetLeft >  imgElem.offsetWidth - line.offsetWidth/2){
                isTaken = false;
                line.style.left = screen.offsetWidth- line.offsetWidth/2 + 'px';
            }
        })


    </script>
</body>
</html>
3
  • У вас что-то пошло не так) При любом тыке всё становится серым. 28 мар 2020 в 16:32
  • я затрудняюсь ответить на ваш комментарий) если "тык" произвести по картинке и потянуть курсор, то проблем возникать не должно) Я проверяю на Chrome у меня все ок
    – CyberEd
    28 мар 2020 в 17:58
  • @Sevastopol' прошу вас следовать видеоинструкции, это должно помочь вам сделать "тык" и воспроизвести желаемый результат ) clck.ru/MiaGW
    – CyberEd
    29 мар 2020 в 11:39

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.