Javascript Screensaver

by dirkk0

HTML

<h3>Simple JS Screensaver Implementation</h3>
<p>Background will randomly change color after 5 seconds on idle mouse. Background will revert back to white when detects a mouse move again.</p>

<p>This uses JQuery and JQueryUI. JQueryUI is only used for background color animation. JQuery UI is not really necessary depending on what you want to use for your screensaver.</p>

<div id="screensaver"></div>

CSS

#screensaver { position: absolute; width: 100%; height:100%; left:0px; top: 0px; display: none; z-index:9999; }

JavaScript

var mousetimeout;
var screensaver_active = false;
var idletime = 5;

function show_screensaver(){
    $('#screensaver').fadeIn();
    screensaver_active = true;
    screensaver_animation();
}

function stop_screensaver(){
    $('#screensaver').fadeOut();
    screensaver_active = false;
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

$(document).mousemove(function(){
    clearTimeout(mousetimeout);
	
    if (screensaver_active) {
        stop_screensaver();
    }

    mousetimeout = setTimeout(function(){
        show_screensaver();
    }, 100 * idletime); // 5 secs			
});

function screensaver_animation(){
    if (screensaver_active) {
        $('#screensaver').animate(
            {backgroundColor: getRandomColor()},
            4000,
            screensaver_animation);
    }
}