How to replicate the Mac OS X fade out "screensaver" with jQuery?

Question

You know how on Macs after about 2-3 minutes of no activity it fades out the screen partially — the same on iOS? Well, I want to replicate this on a web page with jQuery.

I know how to make it fade and all, but I don't know how to make it actually work after 2 or 3 minutes of no mouse move or key presses.

I've researched this on Google and I just keep getting "How to display a webpage as a screensaver on Mac OS X" which is not what I want.

Anyone know how to do this?

Thanks.

Answer 1

Something like this (untested)

// set the last event time to now on page loading
var lastEvent = new Date();

function fadeOut(){
    // your fade out routine
}

// bind appropriate events to everything
$('*').bind('keydown mousemove mousedown',function(){
    // set the lastEvent time to now after any event
    lastEvent = new Date();
})

// run this every second
setInterval(function(){
    // get current time
    var now = new Date();
    // compare to last event (minus 2 mins) and fade out if it was long enough
    if(lastEvent < now - (2 * 60 * 1000))
        fadeOut()
},1000)