Canvas Background Effect 3

Size
3,029 Kb
Views
18,216

How do I make an canvas background effect 3?

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

Canvas Background Effect 3 Previews

Canvas Background Effect 3 - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Canvas Background Effect 3</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 { background:url(http://imgs.ga/i/nz5321or3viv.jpg) no-repeat center center fixed; background-size: cover;
}
#pixie { position:relative; 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 3 - Script Codes CSS Codes

body { background:url(http://imgs.ga/i/nz5321or3viv.jpg) no-repeat center center fixed; background-size: cover;
}
#pixie { position:relative; width:100%; height:100%;
}

Canvas Background Effect 3 - 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.rect(this.x, this.y, widthRect, heightRect); 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(this.stop, 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 rint = 60;
var numberObject = 8e3;
var numberBall = 100;
var pulsion = 20;
var radius = 10;
var speedX = 5;
var speedY = 2;
var widthRect = 100;
var heightRect = 100;
var colorRect = "rgba(66,107,212,";
var opacityRect = .6;
$(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 3 - Script Codes
Canvas Background Effect 3 - Script Codes
Home Page Home
Developer Nick Mkrtchyan
Username Sonick
Uploaded November 10, 2022
Rating 4
Size 3,029 Kb
Views 18,216
Do you need developer help for Canvas Background Effect 3?

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 SEO 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!