How to create particle effect in Angular
Quick and Easy Guide to implement particle effect in angular.
Angular allows us to use many javascript libraries already available and here to create particle effect I have used particle.js.
To use particle.js in your angular application, you need to add the script in the index.html file.
<script src=”https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js"></script>
in component.html file add
<div id=”particles-js”></div>
in component.ts file declare the particleJS available with type as any and then you need to load the particle.json file to the div using the id decorator in ngOnInit and after that, your TS code should look something like this.
import { Component, OnInit } from ‘@angular/core’;
declare var particlesJS: any;
@Component({
selector: ‘app-welcome-page’,
templateUrl: ‘./welcome-page.component.html’,
styleUrls: [‘./welcome-page.component.scss’]
})
export class WelcomePageComponent implements OnInit {
constructor() {}
ngOnInit(): void {
particlesJS.load(‘particles-js’, ‘assets/particles.json’, null);
}
}
And now comes the part to design your particle styles. You can go to the particle.js site and design the style using different toggles present once you are satisfied with a design you can click on download current config(JSON) and place the downloaded JSON in the assets folder of the angular project.
the sample JSON that is used in the video is below.
{“particles”: {“number”: {“value”: 100,“density”: {“enable”: true,“value_area”: 800}},“color”: {“value”: “#ff0000”},“shape”: {“type”: “circle”,“stroke”: {“width”: 1,“color”: “#3ccd4d”},“polygon”: {“nb_sides”: 5},“image”: {“src”: “img/github.svg”,“width”: 100,“height”: 100}},“opacity”: {“value”: 1,“random”: false,“anim”: {“enable”: false,“speed”: 1,“opacity_min”: 0.1,“sync”: false}},“size”: {“value”: 4.00602506169279,“random”: true,“anim”: {“enable”: true,“speed”: 20,“size_min”: 0.1,“sync”: false}},“line_linked”: {“enable”: true,“distance”: 150,“color”: “#45dc24”,“opacity”: 0.4,“width”: 1},“move”: {“enable”: true,“speed”: 6,“direction”: “none”,“random”: true,“straight”: false,“out_mode”: “out”,“bounce”: false,“attract”: {“enable”: true,“rotateX”: 600,“rotateY”: 1200}}},“interactivity”: {“detect_on”: “canvas”,“events”: {“onhover”: {“enable”: true,“mode”: “repulse”},“onclick”: {“enable”: true,“mode”: “push”},“resize”: true},“modes”: {“grab”: {“distance”: 413.877054169203,“line_linked”: {“opacity”: 0}},“bubble”: {“distance”: 3.91608391608392,“size”: 39.96003996003996,“duration”: 2,“opacity”: 1,“speed”: 3},“repulse”: {“distance”: 55.94405594405595,“duration”: 0.4},“push”: {“particles_nb”: 4},“remove”: {“particles_nb”: 2}}},“retina_detect”: true}
