Unblur Teil eines Bildes, wo die Maus Griff Scrollen + schwebt über

Question

Ich brauche diese Lösung https://stackoverflow.com/a/35101701/5908612

zu ändern, wenn wir durch Höhenbild riesigen (und wir versuchen, Bild nach unten gescrollt werden), ist der Effekt Unschärfe ist nicht Arbeiten auf der unteren Seite. Was sollte ich ändern, dass dieser Effekt (unblur spot) funktioniert, wenn ein Benutzer Bild nach unten scrollt?

Ich denke, ich brauche Redraw Mask oder unblur Spot, wenn Bild gescrollt wurde ps.s Stackoverflow ist Ändern der Größe der Bildgröße zu klein ...

var svgNS = "http://www.w3.org/2000/svg"; 
 

 
$('.pic').mousemove(function (event) { 
 
    event.preventDefault(); 
 
    var upX = event.clientX; 
 
    var upY = event.clientY; 
 
    var mask = $('#mask1')[0]; 
 
    
 
    var circle = document.createElementNS(svgNS,"circle"); 
 
    circle.setAttribute("cx", upX); 
 
    circle.setAttribute("cy", upY); 
 
    circle.setAttribute("r", "30"); 
 
    circle.setAttribute("fill", "white"); 
 
    circle.setAttribute("filter", "url(#filter2)"); 
 
    
 
    mask.appendChild(circle); 
 
    
 
    setTimeout(function(){ 
 
     circle.style.opacity = '0'; 
 
     setTimeout(function(){ 
 
      mask.removeChild(circle); 
 
     }, 300); 
 
    }, 300); 
 
});

.pic { 
 
    text-align: center; 
 
    position: relative; 
 
    height: 250px; 
 
} 
 
.blur { 
 
    height: 100%; 
 
} 
 
.overlay { 
 
    position: absolute; 
 
    top: 0px; 
 
    left: 0px; 
 
    height: 100%; 
 
} 
 
circle { 
 
    opacity: 1; 
 
    -webkit-transition: opacity 200ms linear; 
 
    transition: opacity 200ms linear; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="pic"> 
 
    <svg class="blur" xmlns="http://www.w3.org/2000/svg" width="100%" xmlns:xlink="http://www.w3.org/1999/xlink" > 
 
     <image filter="url(#filter2)" xlink:href="http://i.imgur.com/2SrFn0Q.jpg" width="528px" height="1042px"></image> 
 
     <filter id="filter2"> 
 
      <feGaussianBlur stdDeviation="5" /> 
 
     </filter> 
 
     <mask id="mask1"> 
 
      <circle cx="-50%" cy="-50%" r="30" fill="white" filter="url(#filter2)" /> 
 
     </mask> 
 
     <image xlink:href="http://i.imgur.com/2SrFn0Q.jpg" width="528px" height="1042px" mask="url(#mask1)"></image> 
 
    </svg> 
 
</div>

Answer 1

var relativePosition = { 
      left: event.pageX - $(document).scrollLeft() - $('.pic').offset().left, 
      top : event.pageY - $(document).scrollTop() - $('.pic').offset().top 
      }; 

diese Arbeit :)