Author: | IbeVanmeenen |
---|---|
Views Total: | 5,220 views |
Official Page: | Go to website |
Last Update: | July 17, 2017 |
License: | MIT |
Preview:

Description:
An animated noise background for your webpage, built using JavaScript and HTML5 canvas.
How to use it:
Create an HTML5 canvas element on the webpage.
<canvas id="noise" class="noise"></canvas>
Make the canvas element fullscreen.
.noise { z-index: 100; position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: .05; }
The core JavaScript to generate the animated noise effect on the canvas element.
const noise = () => { let canvas, ctx; let wWidth, wHeight; let noiseData = []; let frame = 0; let loopTimeout; // Create Noise const createNoise = () => { const idata = ctx.createImageData(wWidth, wHeight); const buffer32 = new Uint32Array(idata.data.buffer); const len = buffer32.length; for (let i = 0; i < len; i++) { if (Math.random() < 0.5) { buffer32[i] = 0xff000000; } } noiseData.push(idata); }; // Play Noise const paintNoise = () => { if (frame === 9) { frame = 0; } else { frame++; } ctx.putImageData(noiseData[frame], 0, 0); }; // Loop const loop = () => { paintNoise(frame); loopTimeout = window.setTimeout(() => { window.requestAnimationFrame(loop); }, (1000 / 25)); }; // Setup const setup = () => { wWidth = window.innerWidth; wHeight = window.innerHeight; canvas.width = wWidth; canvas.height = wHeight; for (let i = 0; i < 10; i++) { createNoise(); } loop(); }; // Reset let resizeThrottle; const reset = () => { window.addEventListener('resize', () => { window.clearTimeout(resizeThrottle); resizeThrottle = window.setTimeout(() => { window.clearTimeout(loopTimeout); setup(); }, 200); }, false); }; // Init const init = (() => { canvas = document.getElementById('noise'); ctx = canvas.getContext('2d'); setup(); })(); }; noise();
single animation, game make to whats need mine have? generally tutorial shall be.