Create Noise Background With JavaScript And Canvas - CSS Script

Demo Download

Author:	IbeVanmeenen
Views Total:	5,201 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:

• 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
• Random SVG Background Generator In JavaScript – rbgen.js
• CSS Only Starry Sky Background Effect
• Generate Random Abstract Backgrounds Using Vanilla JavaScript

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

• Versatile Interactive SVG Chart Library – apexcharts.js
• macOS Dock Inspired Navigation Bar in Pure CSS
• Customizable Accessible In-place Editing – edit-element
• Elegant Accessible Date Range Picker In JavaScript – Hotel Datepicker
• 3D Realistic Snow & Wind Effects with Three.js
• Highly Customizable Skeleton Loader In Pure CSS – Skeleton Mammoth
• Bootstrap Style Accessible Modal Window In Pure JavaScript – accessible-minimodal

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 Context Menu 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 SVG switch tabs text animation toast tree view Typing Animation © 2013-2024 CSSScript.com, A jQuery Plugins Subsite. All rights reserved.