Create Noise Background With JavaScript And Canvas - CSS Script

Demo Download

Author:	IbeVanmeenen
Views Total:	5,237 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();

See Also:

• Create A Background Particles System With JavaScript And Canvas – nodes.js
• Create a Single Gradient/Image Background across Multiple Elements – ShareShade
• Animated ASCII Backgrounds for Web Apps – ASCIIGround.js
• Create Interactive Particle Backgrounds with Pure JavaScript – DotWave.js
• Interactive Star Field Background with JavaScript and Canvas
• Create Dynamic Abstract Web Backgrounds With color4bg.js
• Modern Geometric Shapes Generator With JavaScript and SVG
• Responsive Video Background Component With Image Fallback

You Might Be Interested In:

Post navigation ← 3 Layer Image After/Before Comparison Slider Minimal Notification Library In Vanilla JavaScript – notes.js →

One thought on “Create Noise Background With JavaScript And Canvas”

1. single animation, game make to whats need mine have? generally tutorial shall be.

   Reply ↓

Leave a ReplyCancel reply

Search for:

Latest

• Lightweight & Performant JavaScript Animation Library – MotionFlow
• High-Fidelity HTML to PowerPoint Converter in JavaScript – dom-to-pptx
• Fast, Extensible, Touch-enabled Carousel & Slider JS Library – Smooothy
• Minimal Image Panning Library – LC-Mouse-Drag
• Interactive SVG World Map Library – svgMap.js
• Simple Multilingual Calendar Component With Vanilla JavaScript
• Customizable Select Box & Input Field Enhancement Library – Choices.js

Get Free Updates

Get Weekly Email on latest Web Dev & Web Design resources. No spam, we promise!

Featured

You Might Also Like

Alert autocomplete background bootstrap Bootstrap 5 calendar Carousel checkbox Confirm Dialog CSS framework dark mode Date Picker dialog dropdown menu editor form validation gallery lightbox Grid Layout hover effect Image Lightbox image zoom Lazy Load lightbox loading indicator Loading Spinner material design multiple select off-canvas menu one page scroll Parallax progress bar range slider Responsive Menu scroll Scroll Animation select side menu smooth scroll switch tabs Text Animation Toast Notification Tree View Typing Animation Web Component © 2013-2025 CSSScript.com, A jQuery Plugins Subsite. All rights reserved.