Canvas Background Effect 2

Size
2,929 Kb
Views
16,192

How do I make an canvas background effect 2?

What is a canvas background effect 2? How do you make a canvas background effect 2? This script and codes were developed by Nick Mkrtchyan on 10 November 2022, Thursday.

Canvas Background Effect 2 Previews

Canvas Background Effect 2 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Background Effect 2</title> <script src="https://s.codepen.io/assets/libs/modernizr.js" type="text/javascript"></script> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { margin: 0; padding: 0; background-color: #164979;
}
#pixie { width:100%; height:100%;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="pixie"></canvas>
<div class="container"></div>
<script src="https://code.jquery.com/jquery-1.7.1.min.js" type="text/javascript"></script> <script src="js/index.js"></script>
</body>
</html>

Canvas Background Effect 2 - Script Codes CSS Codes

body { margin: 0; padding: 0; background-color: #164979;
}
#pixie { width:100%; height:100%;
}

Canvas Background Effect 2 - Script Codes JS Codes

function BrowserDetection() { if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { var e = new Number(RegExp.$1); rint = 10; pulsion = 3 } else if (/MSIE (\d+\.\d+);/.test(navigator.userAgent)) { var t = new Number(RegExp.$1); rint = 50; pulsion = 16 } else if (/Chrome[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { var n = new Number(RegExp.$1); rint = 50; pulsion = 16 } else if (/Opera[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { var r = new Number(RegExp.$1); rint = 50; pulsion = 16 } else if (/Safari[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { var i = new Number(RegExp.$1); rint = 50; pulsion = 16 } WIDTH = window.innerWidth; if (WIDTH < 1024) { numberObject = 19e3; numberBall = 10; pulsion = 2; rint = 10 }
}
function draw() { con.clearRect(0, 0, WIDTH, HEIGHT); for (var e = 0; e < pxs.length; e++) { pxs[e].fade(); pxs[e].move(); pxs[e].draw() }
}
function Circle() { WIDTH = window.innerWidth; HEIGHT = window.innerHeight; this.s = { ttl: numberObject, xmax: speedX, ymax: speedY, rmax: radius, rt: pulsion, xdef: 960, ydef: 540, xdrift: 4, ydrift: 4, random: true, blink: true }; this.reset = function () { this.x = this.s.random ? WIDTH * Math.random() : this.s.xdef; this.y = this.s.random ? HEIGHT * Math.random() : this.s.ydef; this.r = (this.s.rmax - 1) * Math.random() + 1; this.dx = Math.random() * this.s.xmax * (Math.random() < .5 ? -1 : 1); this.dy = Math.random() * this.s.ymax * (Math.random() < .5 ? -1 : 1); this.hl = this.s.ttl / rint * (this.r / this.s.rmax); this.rt = Math.random() * this.hl; this.s.rt = Math.random() + 1; this.stop = Math.random() * .2 + .4; this.s.xdrift *= Math.random() * (Math.random() < .5 ? -1 : 1); this.s.ydrift *= Math.random() * (Math.random() < .5 ? -1 : 1) }; this.fade = function () { this.rt += this.s.rt }; this.draw = function () { if (this.s.blink && (this.rt <= 0 || this.rt >= this.hl)) this.s.rt = this.s.rt * -1; else if (this.rt >= this.hl) this.reset(); var e = 1 - this.rt / this.hl; con.beginPath(); con.arc(this.x, this.y, this.r, 0, Math.PI * 2, true); con.closePath(); var t = this.r * e; g = con.createRadialGradient(this.x, this.y, 0, this.x, this.y, t <= 0 ? 1 : t); g.addColorStop(1, colorRect + e * opacityRect + ")"); con.fillStyle = g; con.fill() }; this.move = function () { WIDTH = window.innerWidth; HEIGHT = window.innerHeight; this.x += this.rt / this.hl * this.dx; this.y += this.rt / this.hl * this.dy; if (this.x > WIDTH || this.x < 0) this.dx *= -1; if (this.y > HEIGHT || this.y < 0) this.dy *= -1 }; this.getX = function () { return this.x }; this.getY = function () { return this.y }
}
var WIDTH;
var HEIGHT;
var canvas;
var con;
var g;
var pxs = new Array;
var numberObject = 8e3;
var numberBall = 100;
var pulsion = 16;
var speedX = 5;
var speedY = 2;
var colorRect = "rgba(255,255,255,";
var opacityRect = .2;
var rint = 30;
var radius = 68;
$(document).ready(function () { BrowserDetection(); WIDTH = window.innerWidth; HEIGHT = window.innerHeight; canvas = document.getElementById("pixie"); $(canvas).attr("width", WIDTH).attr("height", HEIGHT); con = canvas.getContext("2d"); for (var e = 0; e < numberBall; e++) { pxs[e] = new Circle; pxs[e].reset() } setInterval(draw, rint)
})
Canvas Background Effect 2 - Script Codes
Canvas Background Effect 2 - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4
Size 2,929 Kb
Views 16,192
Do you need developer help for Canvas Background Effect 2?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nick Mkrtchyan (Sonick) Script Codes
Create amazing web content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!