A Screensaver Built in Pure Javascript, HTML, and CSS – Finished Example

There seem to be a few other javascript based screensavers out there, but not really a huge selection. I recently got the opportunity to build a screensaver for a hybrid mobile application, so I figured I would take it a step further and add some documentation and allow for parameters to be passed through so that it could be used as a plugin.

The screensaver is built for responsive scaling, so it uses REMs instead of pixels, and takes the base font size to calculate element positioning. I also added CSS transitions to allow for your image to fade in and fade out as it randomly positions itself across the screen on a 6 second timer. Event listeners are also added for detecting touches or clicks so that it can restart the timeout to initiate the screensaver again. I added a parameter to pass through which will stop the screensaver after a set time, which can be useful to trigger other functions after the screensaver is completed.

Click the link below to try out a demo (wait a few seconds for the animation to start)

Demo the screensaver

Parameter documentation

There are 4 different configuration options for the screensaver plugin. All of these values are optional, if none are set the defaults will be used.

• timeout: Accepts a numeric value in milliseconds. This sets how long to wait until the screensaver is activated. The default value is 60000 (10 minutes)
• width: Accepts a numeric value in REMs which sets the width of your element. The default value for this is 25.
• height: Accepts a numeric value in REMs which sets the height of your element. The default value for this is 25.
• exitTimeout: Accepts a numeric value in milliseconds. This sets how long to wait after the screensaver is initiated to exit the screensaver. The default for this option is disabled, so it will only activate if you provide a value.

Here is an example of usage:

    startScreenSaver({
        timeout: 5000,
        width: 30,
        height: 30,
        exitTimeout: 1000,
    }); 

To get the screensaver up and running all you need is to add the CSS and javascript, and change the background image of the badge element to one in your environment. This is not reliant on any frameworks like jQuery, so it should easily integrate with any project.

Download the plugin files

Here is the javascript being used in the screensaver:

var screenSaver = {};


function startScreenSaver(options) {

  //* attach event listeners to exit screensaver
  attachScreenSaverEventListeners();

  if(!screenSaver.initiated) {

    //* set screensaver options
    screenSaver.options = {

       timeout: options.timeout || 60000, //* default timer to start screensaver is 10 minutes

        width: options.width || 25,   //* default width is 25rem

        height: options.height || 25, //* default height is 25rem

        exitTimeout: options.exitTimeout || null, //* default timer to exit screensaver is disabled

    }

    //* create elements
    var overlay = document.createElement("div");

    overlay.setAttribute('class', 'screensaver-overlay');

    document.body.appendChild(overlay);

    var createBadge = document.createElement("div");

    createBadge.setAttribute('id', 'saver-badge');

    document.body.appendChild(createBadge);

    createBadge.style.width = screenSaver.options.width + 'rem';

     createBadge.style.height = screenSaver.options.height + 'rem';

  }

  document.getElementsByTagName("body")[0].classList.remove('screensaver');

  screenSaver.initiated = true;

  screenSaver.setTimeoutValue = screenSaver.options.timeout; 

  screenSaver.setTimeoutExit = screenSaver.options.timeoutExit; 

  screenSaver.setTimeout = null; //* clear timeout

  screenSaver.inProgress = false;

  screenSaver.timerStarted = false;

  clearTimeout(screenSaver.setTimeout);

  screenSaver.setTimeout = setTimeout(function() {
    
    document.getElementsByTagName("body")[0].classList.add('screensaver');

      screenSaver.inProgress = true;

      var saverBadge = document.getElementById("saver-badge");

      clearInterval(screenSaver.setInterval); //* clear badge display interval

      screenSaver.setInterval = null;

      //* get dimensions in em
      var windowHeight = window.outerHeight / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));

      var windowWidth = window.outerWidth / parseFloat(window.getComputedStyle(document.getElementsByTagName("body")[0], null).getPropertyValue('font-size'));

      screenSaver.setInterval = setInterval(function() {

        if (screenSaver.inProgress === true) {

          saverBadge.classList.remove('visible');

          setTimeout(function() {

            saverBadge.offsetWidth = saverBadge.offsetWidth;

            saverBadge.classList.add('visible');

          },1);

          var saverTopValue = Math.floor(Math.random() * windowHeight) - screenSaver.options.width;

          var saverLeftValue = Math.floor(Math.random() * windowWidth) - screenSaver.options.height;

          if (saverTopValue <= 0) { //* make sure the badge doesn't go off the screen

            saverTopValue = saverTopValue + 15;

          }

          if (saverLeftValue <= 0) {

            saverLeftValue = saverLeftValue + 15;

          }

          saverBadge.style.top = saverTopValue + 'rem';

          saverBadge.style.left = saverLeftValue + 'rem';

          if(screenSaver.timerStarted === false && screenSaver.options.exitTimeout != null) {

            startScreenSaverTimer();

          }
        }
      }, 6000);

    }, screenSaver.setTimeoutValue);
}

function startScreenSaverTimer() {

  screenSaver.timerStarted = true;

  setTimeout(function() {

    stopScreenSaver();

  }, screenSaver.setTimeoutExit);

}

function stopScreenSaver() {

  startScreenSaver();

  clearInterval(screenSaver.setInterval);

  document.getElementsByTagName("body")[0].classList.remove('screensaver');

  screenSaver.timerStarted = false;

}

function attachScreenSaverEventListeners() {

  var events = ['touchstart', 'mousedown', 'mousemove', 'touchmove', 'keypress' 'scroll'];

  var resetScreenSaver = function(e) {

    if (screenSaver.inProgress) {

      e.stopPropagation();

      e.preventDefault();

    }

    clearTimeout(screenSaver.setTimeout);

    clearInterval(screenSaver.setInterval);

    document.getElementsByTagName("body")[0].classList.remove('screensaver');

    startScreenSaver();

  }

  var checkClick = function(e) {

    if (screenSaver.inProgress) {

      startScreenSaver();

    }

  }

  var bindEvents = function(eventName) {

    document.addEventListener(eventName, screenSaver.initialize);

    //* bind click as fallback for touchstart and mousedown
    document.addEventListener('click', checkClick);

  }

  var unbindEvents = function(eventName) {

    document.removeEventListener(eventName, screenSaver.initialize);

  }

}