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 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
• Add A Touch Of Romance To Webpage With The Animate Heart Canvas Library

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

• Multi-Select Box With Tree Structured Data Dropdown List – Treeselect
• Create Modern Glassmorphism Interfaces with Liquid Glass CSS Framework
• Mobile-First Drag and Drop Alternative for List Reordering – picknplace.js
• High-Fidelity HTML to PowerPoint Converter in JavaScript – dom-to-pptx
• Draggable HTML/SVG Elements – PlainDraggable
• Lightweight, Self-Hosted CAPTCHA Solution – xsukax JS CAPTCHA
• Vanilla JS Date & Time Picker for Moderb Web Apps – Tuncxys DatePicker

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 dropdown menu 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.