Как сделать подобие сканера? [требует правки]

220

23 января 2017, 20:50

Здравствуйте.

Подскажите, как можно реализовать "сканер", как на этом примере:

Сайт: http://verstka.test30.ru/sklif/personal-office-scanner.html

Здесь это реализовано на canvas, но на его изучение сейчас уйдет много времени. Никогда с этим не работал. Может, кто-то встречал подобное на jQuery? Не знаю, с какой стороны подступиться. Подскажите, как реализовать или хоть наводку дайте.

Answer 1

Попробуйте такой вариант, постарался сделать как можно проще:

$("body").mousemove(function(event) { 
  x = event.pageX - 50; 
  y = event.pageY - 50; 
  $('.scaner').css({ 
    transform: "translate("+x+"px, " + y + 'px)' 
  }); 
$('.scaner .image2').css({ 
    transform: "translate("+(-x)+"px, " + (-y) + 'px)' 
  }); 
})

.image1 { 
  position: absolute; 
} 
.scaner { 
  position: absolute; 
  overflow: hidden; 
  width: 100px; 
  height: 100px; 
  border-radius: 20px 
} 
.image2 { 
  position: absolute; 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div class=image1> 
  <img src="https://placeimg.com/200/200/any"> 
</div> 
<div class=scaner> 
  <div class=image2> 
    <img src="https://placeimg.com/200/200/arch"> 
  </div> 
</div>