LiPa (LIving PAges)
♦ in-browser screensavers based on HTML5 Canvas ♦
♦ внутрішньобраузерні зберігачі екрану на основі HTML5 Canvas ♦
(as CRTs fade off into history, should it be attentionkeepers?)
To see random screensaver in action, wait for few seconds doing nothing.
(That is, don't move mouse, press keys, switch or resize the browser window.)
To switch it off, do anything of above.
If you want to see a specific module, then click one of the following links (and wait for few seconds...):
• Barnsleyer • Blurrer • Drainer • Fireflyer • Flagwaver • Formutator • Huecycler • Negator • Noiser • Rotator • Uvwormer • Waver1 • Waver2 • Zoomer •
Usage
Get the archive from Download page. To test locally, unpack it and open "lipa_test.html".
Then put the archive's content to some dir of your site and edit "lipa-x.y.z.js": there are few parameters at the beginning that you need to set:
LiPa.pathToScripts must be a path to the folder where you have put the archive's content, excluding trailing slash "/", and relative to .html where you'll insert the script.
LiPa.filepathToBackground is a full (including filename) path to 'background' image. Don't worry about aspect ratio, it will be rescaled and cropped automatically.
LiPa.delay is, well, the delay in milliseconds before the screensaver is activated. If during this period any action is performed, the timer resets.
LiPa.modules is the list of modules you want the screensaver to choose randomly from. Each entry, say 'X', corresponds to "lipa_X.js" module file.
Insert the script into .html with the following line of code:
<script src="path-to-dir-with-snippet/lipa-x.y.z.js" type="text/javascript"></script>
Customisation
Each "lipa_*.js" module has its own parameters, listed under "Primary parameters", common and specific; for example, "frate" is the framerate, "number" of Fireflyer module is the number of the «fireflies» etc. Adjust these to your needs.
Logging
Open Web Console (Ctrl+Shift+K on Firefox) to see some telemetry.
html2canvas
To render the page as image, this snippet uses html2canvas, v1.0.0-alpha.9 html2canvas.hertzen.com, Copyright (c) 2018 Niklas von Hertzen hertzen.com
Alikes
To name (just) a few:
github.com/sinky/html5-screensaver-node-webkit
thecodeplayer.com/walkthrough/glazing-ribbon-screensaver-effect-in-html5-canvas
thingsinjars.com/post/457/web-page-screensavers
...arbitrary full-page animation that doesn't require user interaction satisfies the definition of a screensaver. The «difference» is merely that the original page's look (not the content, which the look is a projection of) becomes a «base» for the animated effect, thanks to html2canvas.