JQuery particles
How do I make an jquery particles?
What is a jquery particles? How do you make a jquery particles? This script and codes were developed by Ghost Rider on 23 July 2022, Saturday.
JQuery particles - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>jQuery particles</title> <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='//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js'></script> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
JQuery particles - Script Codes CSS Codes
html { height: 100%;
}
body { background:#2C2C44; overflow:hidden; height:100%;
}
.canvas { width:100%;
}
JQuery particles - 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; }); } }; } ]);
Developer | Ghost Rider |
Username | GhostRider |
Uploaded | July 23, 2022 |
Rating | 3 |
Size | 2,724 Kb |
Views | 172,040 |
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!
Name | Size |
Shaking css animation | 1,896 Kb |
CSS Img Slider2 | 2,380 Kb |
Iphone game | 3,423 Kb |
HTML5 City trails | 2,886 Kb |
Sudoko Solver | 29,760 Kb |
A Pen by Ghost Rider | 57,648 Kb |
Under construction | 1,642 Kb |
Shapes of CSS | 6,042 Kb |
Laserz... | 1,848 Kb |
Google MAP | 10,594 Kb |
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!
Name | Username | Size |
See Through | Larrygeams | 77,410 Kb |
Wikipedia Viewer | Codinger | 4,681 Kb |
Scroll using CSS | Casperovic | 2,159 Kb |
Animated Slide Hamburger Mobile Menu | BJack | 2,247 Kb |
CSS3 Fullscreen Background Slideshow | Leetech | 3,435 Kb |
Find The Penguin | Lelder | 2,212 Kb |
CSS Letter animations | Sladix | 2,116 Kb |
Heartbeat | Apetrov | 2,079 Kb |
Canvas Orbital Trails v2 | Jackrugile | 3,421 Kb |
Scroll effect with text with help from Skrollr | Luxonglassing | 2,935 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!