Stopping a clip path flashlight effect
Question
In this code below I use clip path and the mouse to create a flashlight effect with your mouse and you can use it to look around an image and this works perfectly fine.
However I'm wondering how to create a JavaScript function to stop this happening and just display the whole image without the flashlight effect. This would be attached to the button turn on light.
I have tried and the closest I've got is that it shows the image fine but goes back to the flashlight after I move the mouse.
Any code on how to stop this and a bit of explanation how its stoping the effect would be great
So I want the flashlight effect to stop working when I click the button
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
function moveTorch(event){
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
function turnOn(){
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
></div>
</div>
</body>
</html>
1 answers
solution1
1 ACCPTED 2021-04-05 19:12:31
Try this code:
<html>
<head>
<style>
.image {
width:600px;
height:400px;
border:5px solid black;
cursor:none;
}
.image .torch {
width:600px;
height:400px;
background:url("back.jpg") center no-repeat;
background-size:cover;
clip-path:circle(30% at 0% 0%);
}
</style>
<script>
var flashLightOn = false;
function moveTorch(event){
if (!flashLightOn) {
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = `circle(30% at ${event.offsetX}px ${event.offsetY}px)`;
}
}
function turnOn(){
flashLightOn = true;
var torch = document.getElementsByClassName("torch")[0];
torch.style.clipPath = "none";
}
</script>
</head>
<body>
<div class="image" onmousemove="moveTorch(event)">
<div class="torch">
<button onclick="turnOn();">Turn on Light</button>
>
</div>
</div>
</body>
</html>
Basically it stores the flash liste state (on/off) in a variable. When on, the event that makes the flash light effect does nothing ( if flashLightOn statement).
When you click on the button, the flashLightOn value is set to false, and the style of the "torch" is reset to default to disable the light effect.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.