Build a Classic Screensaver Effect With Screensaver.js

Preview:

Description:

A lightweight screensaver library that monitors user interactions (mouse, keyboard, and touch events) on the page and activates a customizable screensaver with a custom logo after a set period of inactivity.

When activated, the library darkens the whole page, hides the page content, and makes the custom logo move across the webpage to emulate the classic Windows screensaver experience.

How to use it:

1. Download and include the Screensaver.js library in your HTML file.

<script src="Screensaver.js"></script>

2. Initialize the Screensaver and pass the following parameters to the Screensaver() function:

const myScreensaver = new Screensaver({
  // Time in seconds to trigger the screensaver
  secondsInactive: 3,    
  // Speed of the logo movement
  speed: 1.5,            
  // Path to your custom logo
  logo: "logo.png",      
  // Prevents activation when iframes are in use
  disabledWhenUsingIframes: true  
});