Take Your Web Design to the Next Level with Particle JS in 2023 : A Tutorial by

Welcome to Swapnil Codes, your go-to destination for high-quality video tutorials on web development! In this tutorial, we will explore the world of Particle JS, a popular JavaScript library that allows developers to easily create stunning particle effects on their web pages.
SOURCE CODE : www.codelabota...
Our expert instructor, Swapnil, will guide you through the process of setting up Particle JS on your website and demonstrate how to use the library to create a wide range of particle effects, from simple backgrounds to interactive animations. You will learn how to customize particle colors, shapes, and movements to achieve the desired visual effects, as well as how to integrate Particle JS with other web technologies such as CSS and HTML.
Whether you are a beginner or an experienced web developer, this tutorial is perfect for anyone looking to enhance their web pages with eye-catching particle effects. With Swapnil's clear explanations and step-by-step instructions, you will be creating stunning particle animations in no time!
Checkout our blog as well : www.codelabota... for coding content.
Don't forget to subscribe to Swapnil Codes for more great tutorials on web development, and leave a comment below to let us know what you think of this tutorial. Thanks for watching!
#particlesjs #javascript #animation

[@premshah7685]

Great video first of all ! 👍
But what if I want to connect the dots on hovering the cursor ? I saw it in a website and it look cool ! Please let me know if u know how to do it !

[@swapnilcodes]

Update your app.js with the following lines of code...
document.addEventListener('DOMContentLoaded', function () {
particlesJS('particles-js', {
particles: {
number: {
value: 80,
density: {
enable: true,
value_area: 800
}
},
color: {
value: '#ffffff'
},
shape: {
type: 'circle',
stroke: {
width: 0,
color: '#000000'
},
polygon: {
nb_sides: 5
}
},
opacity: {
value: 0.5,
random: false,
anim: {
enable: false,
speed: 1,
opacity_min: 0.1,
sync: false
}
},
size: {
value: 3,
random: true,
anim: {
enable: false,
speed: 40,
size_min: 0.1,
sync: false
}
},
line_linked: {
enable: true,
distance: 150,
color: '#ffffff',
opacity: 0.4,
width: 1
},
move: {
enable: true,
speed: 6,
direction: 'none',
random: false,
straight: false,
out_mode: 'out',
attract: {
enable: false,
rotateX: 600,
rotateY: 1200
}
}
},
interactivity: {
detect_on: 'canvas',
events: {
onhover: {
enable: true,
mode: 'repulse'
},
onclick: {
enable: true,
mode: 'push'
},
resize: true
},
modes: {
grab: {
distance: 400,
line_linked: {
opacity: 1
}
},
bubble: {
distance: 400,
size: 40,
duration: 2,
opacity: 8,
speed: 3
},
repulse: {
distance: 100
},
push: {
particles_nb: 4
},
remove: {
particles_nb: 2
}
}
},
retina_detect: true
});
// Custom code to connect dots on mouse hover
var canvasEl = document.querySelector('#particles-js canvas');
var ctx = canvasEl.getContext('2d');
var particles = [];
var connectDistance = 100;
canvasEl.addEventListener('mousemove', function (e) {
var mouseX = e.clientX;
var mouseY = e.clientY;
for (var i = 0; i < particles.length; i++) {
var particle = particles[i];
var dx = particle.x - mouseX;
var dy = particle.y - mouseY;
var dist = Math.sqrt(dx * dx + dy * dy);
if (dist < connectDistance) {
ctx.beginPath();
ctx.moveTo(particle.x, particle.y);
ctx.lineTo(mouseX, mouseY);
ctx.strokeStyle = particle.color;
ctx.stroke();
ctx.closePath();
}
}
});
window.pJSDom[0].pJS.fn.particlesCreate = function () {
for (var i = 0; i < this.pJS.particles.number.value; i++) {
this.pJS.particles.array.push(new window.pJSDom[0].pJS.fn.particle(this.pJS.particles.color.value, this.pJS.particles.opacity.value));
}
};
window.pJSDom[0].pJS.fn.particle = function (color, opacity, position) {
// Existing code for particle creation...
particles.push(this);
};
});