माउस स्थिति

Question

के आधार पर किसी क्षेत्र की अस्पष्टता बदलें, क्या पृष्ठभूमि की अस्पष्टता को बदलना संभव है लेकिन कर्सर क्षेत्र के नीचे ही (उदाहरण के लिए एक सफेद छोटा सर्कल)? मैं इसे मूल गर्मी की तरह थोड़ा सोच रहा हूं लेकिन गर्मी नहीं रहती है - यह कर्सर का पालन करती है।

html { 
    background-color: #000; 
    width: 100%; 
    height: 100%; 
} 

जे एस:

$(document).mousemove(function(event){ 
    var i = event.pageX.toPrecision(1)/1000; 
    $("html").css('opacity', i) 
}); 

क्षमा करें यह शायद एक बहुत ही बुनियादी शुरुआती बिंदु है

पल मैं निम्नलिखित

HTML है पर

। क्या मुझे कैनवास का उपयोग करने की आवश्यकता होगी?

Answer 1

आप ऐसा कर सकते हैं svg

का उपयोग कर मैं क्या किया: -

मैं एक ही सह तालमेल, ऊंचाई और चौड़ाई के साथ दो ही छवियों रखा जाता है और ऊपर से एक के लिए एक परिपत्र clip-path दिया (जो पूर्ण है अस्पष्टता) जब माउस ले जाता है वृत्त की स्थिति भी बदल जाता है

$('svg').on('mousemove',function(e){ 
 
    $('.a').attr('cx',e.pageX).attr('cy',e.pageY) 
 
     
 
})

.one{ 
 
    opacity:.5; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<svg width="500" height="500"> 
 
    <clippath id="clip" > 
 
     <circle cx="50" cy="50" r="50" class="a"/> 
 
    </clippath> 
 
    
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" class="one"/> 
 
     
 
    <image xlink:href="https://images.unsplash.com/photo-1474575981580-1ec7944df3b2?dpr=1&auto=format&fit=crop&w=1500&h=934&q=80&cs=tinysrgb&crop=&bg=" width="500" height="500" x="0" y="0" clip-path="url(#clip)"/> 
 
    </svg>