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 |
Google MAP | 10,594 Kb |
JQuery parallax | 2,230 Kb |
Shapes of CSS | 6,042 Kb |
Codepen search | 12,389 Kb |
CSS Img Slider2 | 2,380 Kb |
CSS Scroll Bars | 2,509 Kb |
Shaking css animation | 1,896 Kb |
Responsive Gallery | 2,489 Kb |
JQuery particles | 2,724 Kb |
CSS Image Slider | 3,255 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 |
Reviews and Ratings Star | Zbnmstry | 1,591 Kb |
Hexagons | Ashmind | 4,360 Kb |
Lecture 1 | Law | 0 Kb |
Parallax with only CSS | Thulioph | 2,297 Kb |
Flat design iframe | Damienpm | 1,819 Kb |
Barber Shop | Bhlaird | 6,270 Kb |
Transitioning application screens with semantically named classes | Djgrant | 3,697 Kb |
CSS3 Button Examples | Volusion | 3,377 Kb |
Colorful Sliders | Chanrith | 1,246 Kb |
HTML5 Breakout | Jaysalvat | 4,873 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!