Angular Particles Explosion

Developer
Marius Balaj
Size
2,798 Kb
Views
58,696
  1. Angular Particles Explosion Previews
  2. Angular Particles Explosion HTML Codes
  3. Angular Particles Explosion CSS Codes
  4. Angular Particles Explosion JS Codes

How do I make an angular particles explosion?

You can change the count, speed, size, spawn and the colors.. What is a angular particles explosion? How do you make a angular particles explosion? This script and codes were developed by Marius Balaj on 11 August 2022, Thursday.

Angular Particles Explosion Previews
IQ Test

Angular Particles Explosion - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Angular Particles Explosion</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div ng-app="particles"> <div class="canvas explosion" particle="circle" count="500" speed="200" size="50" spawn="10" colors="['#f0fd36', '#f49ff1', '#f53eac', '#76fbfa']" ></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Angular Particles Explosion - Script Codes CSS Codes

html { height: 100%;
}
body { background:#2C2C44; overflow:hidden; height:100%;
}
.canvas { width:100%;
}

Angular Particles Explosion - Script Codes JS Codes

angular.module("particles", []) .directive("explosion", ["$interval", function($interval) { return { restrict: "C", template: "<canvas></canvas", replace: true, transclude: true, scope: { particle: "@", count: "=", speed: "=", size: "=", colors: "=", spawn: "=" }, link: function(scope, element, attrs) { console.log("Starting canvas ", scope.particle); var ctx = element[0].getContext('2d'); var particles = []; var width, height; var maxCount = scope.count || 100; var maxSpeed = scope.speed || 150; var maxSize = scope.size || 10; var colors = scope.colors || ['#f00']; var spawnTime = scope.spawn ? 1000 / scope.spawn : 10; var resize = function() { element.attr({ width: $('body').width(), height: $('body').height() }); width = element.attr('width'); height = element.attr('height'); console.log("Size ", width, "x", height); }; var spawn = function() { particles.push({ x: width / 2, y: height / 2, v: { x: (maxSpeed << 1) * Math.random() - maxSpeed, y: (maxSpeed << 1) * Math.random() - maxSpeed }, s: Math.random() * maxSize, a: 1, c: colors[Math.floor(Math.random() * colors.length)] }); }; var draw = function() { ctx.clearRect(0, 0, width, height); for (var i = 0; i < particles.length; i++) { var p = particles[i]; ctx.globalAlpha = p.a; ctx.fillStyle = p.c; ctx.beginPath(); ctx.arc(p.x, p.y, p.s, 0, 2 * Math.PI); ctx.fill(); } }; var lastSpawned = 0; var update = function(delta) { lastSpawned += delta; while (lastSpawned > spawnTime) { lastSpawned -= spawnTime; spawn(); } var particleOverflow = particles.length - maxCount; if (particleOverflow > 0) { particles.splice(0, particleOverflow); } for (var i = 0; i < particles.length; i++) { var p = particles[i]; p.x += p.v.x * delta / 1000; p.y += p.v.y * delta / 1000; p.a *= 0.99; } }; var finished = false; var time; var animate = function(elapsed) { if (!time) time = elapsed; var delta = elapsed - time; time = elapsed; update(delta); draw(); if (!finished) window.requestAnimationFrame(animate); }; resize(); $(window).on('resize', resize); window.requestAnimationFrame(animate); scope.$on("$destroy", function() { finished = true; }); } }; } ]);
Angular Particles Explosion - Script Codes
Angular Particles Explosion - Script Codes
Home Page Home
Developer Marius Balaj
Username mariusbalaj
Uploaded August 11, 2022
Rating 3.5
Size 2,798 Kb
Views 58,696
Do you need developer help for Angular Particles Explosion?

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!

Marius Balaj (mariusbalaj) Script Codes
Name
Social Buttons v2
JCalculator
Login with flip 3d animation
Folding Effect on Hover
Social Buttons Slide
Symphony of Math.PI
Metro UI animations
Imperial March
Flat iPhone with Next Post Animation
Apple TV poster
Create amazing blog posts 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!