CODEWITHSUNDEEP
javascriptimageblink
LexaGC
LexaGC

Reputation: 130

Fastest way to make image blink --> so fast that you didn't see it

I'm looking for a way to make image blink so fast I cannot see it (and then avoid some screenshoting):

    var img = document.getElementsByTagName('img')[0];
    var i = true;

    setInterval(blink,10);
    
    function blink(){
        if(i){
            img.style.visibility="visible";
            i=false;
        }else{
            img.style.visibility="hidden";
            i=true;
        }
        
    }

But I still see the blink, and I think I could not lower than 10ms . I was thinking initially that below 24 f/s I would not notice it, but it doesn't seems to be the case.

What could I change to make it faster ? Is it even possible ?

Final target is to avoid screen shooting .

Upvotes: 0

Views: 279

Answers (2)

htho
htho

Reputation: 1799

The fastest solution I can think of is to CSS animate the opacity property. The opacity property is animated on the GPU. This means less load on the CPU and the mainthread.

#box {
width: 100px;
height: 100px;
position: relative;
background: red;
animation: 1ms steps(2, jump-none) 0s infinite running blink;

}

@keyframes blink {
  from { opacity: 0; }
  to   { opacity: 1; }
}
<div id="box">Secret Image</div>

Upvotes: 0

CertainPerformance
CertainPerformance

Reputation: 370709

The standard refresh rate for monitors is 60Hz - 60 times per second. This is a hardware limitation - even with perfect software timing, there's no way to display frames more frequently than that - and humans paying attention to a screen can easily see something that appears for 1/60th of a second.

Your only option is to have the image appear and disappear with every frame (which can be done more precisely than setInterval with requestAnimationFrame - but it'll still be visible to those watching closely).

// Ensure browser is not busy
setTimeout(() => {
  window.requestAnimationFrame(() => {
    document.body.classList.toggle('blue');
    window.requestAnimationFrame(() => {
      document.body.classList.toggle('blue');
    });
  });
}, 1000);
.blue {
  background-color: blue;
}

It's not possible for the monitor to display something for a low enough duration that it's not perceivable.

Upvotes: 2

Related Questions