Ein Bild verdecken, um es wie ein Fernglas aussehen zu lassen

Question

Ich habe versucht, eine Ausgabe zu erhalten, wo ein Bild in einem binokularen Element maskiert wird. Der kreisförmige Teil bewegt sich mit dem Mauszeiger und wo immer die Maus hingeht, deckt er den Teil des Bildes auf. Außerdem muss die Maus nicht aus dem Hauptcontainer entfernt werden.

Bild zur Ausgabe:

der restliche Teil wird schwarz bleiben und nur die Elemente werden in dieser Form auf der Maus bewegen sichtbar.

Ich habe den folgenden Code versucht:

$('.clipping-cursor').on('mousemove', function(e) { 
 

 
    var parentOffset = $(this).parent().offset(); 
 
    var relativeXPosition = (e.pageX - parentOffset.left); //offset -> method allows you to retrieve the current position of an element 'relative' to the document 
 
    var relativeYPosition = (e.pageY - parentOffset.top); 
 

 
    $('.clipping-cursor').css({ 
 
     left: relativeXPosition, 
 
     top: relativeYPosition 
 
    }); 
 
    });

.collaborate-wrapper { 
 
    width: 100%; 
 
    height: 90vh; 
 
    background: #000; 
 
    overflow: hidden; 
 
    position: relative; 
 
} 
 
.clipping-cursor { 
 
    width: 1000px; 
 
    height: 580px; 
 
    box-sizing: border-box; 
 
    position: absolute; 
 
    margin-top: -290px; 
 
    margin-left: -500px; 
 
    background-image: url('../images/background/collaborate-2.svg'); 
 
    background-repeat: no-repeat; 
 
    background-size: container; 
 
    background-attachment: fixed; 
 
    background-position: center center; 
 
    -webkit-mask-image: url('../images/masking-circle.svg'); 
 
    -webkit-mask-size: 100%; 
 
    -webkit-mask-repeat: no-repeat; 
 
    -webkit-mask-position: center; 
 
    border: 1px solid #fff; 
 
    cursor: none; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="collaborate-wrapper"> 
 
    <div class="clipping-cursor"> 
 

 
    </div> 
 
</div>

Answer 1

Sie können dies tun, mit SVG und einige JS Position

$(".a").mousemove(function(e) { 
 
    var parentOffset = $(this).parent().offset(); 
 
    var relX = (e.pageX - parentOffset.left) - 55; 
 
    var relY = (e.pageY - parentOffset.top) - 30; 
 

 
    $('mask g').attr('transform', 'translate(' + relX + ',' + relY + ')'); 
 
});

.a { 
 
    width: 400px; 
 
    height: 200px; 
 
    background: url('http://cdn.images.express.co.uk/img/dynamic/151/590x/secondary/Planet-Nine-443937.jpg'); 
 
    background-size: cover; 
 
    background-position: center; 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
svg { 
 
    position: absolute; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="a"> 
 
    <svg x="0px" y="0px" width="400px" height="200px" viewBox="0 0 400 200"> 
 
    <mask id="mask"> 
 
     <rect width="100%" height="100%" x="0" y="0" fill="white" /> 
 
     <g transform="translate(0, 0)"> 
 
     <circle cx="30" cy="30" r="30" /> 
 
     <circle cx="85" cy="30" r="30" /> 
 
     </g> 
 
    </mask> 
 
    <rect x="0" y="0" class="one" mask="url(#mask)" width="400" height="200" /> 
 
    </svg> 
 
</div>

auf mousemove

zu ändern