Triangle particles adding for a website background – Skillbridges
When it comes to designing a visually appealing and interactive website, adding dynamic elements like particle effects can make a significant impact. One popular and intriguing choice is the triangle particle background. This effect involves scattering small triangles across the screen, creating a dynamic and engaging visual experience for your website visitors.
Why Use a Triangle Particle Background?
The triangle particle background offers a unique and modern aesthetic that can capture users’ attention and keep them engaged with your website’s content. This effect can be particularly effective for websites in creative industries, such as art portfolios, design agencies, or event promotion sites. The movement of particles and their geometric shape can add a touch of sophistication to your website’s overall look.
Implementing the Triangle Particle Background
To add a triangle particle background to your website, you can utilize JavaScript libraries that specialize in particle effects. One such library is Particle.js, which simplifies the process of creating and customizing particle animations.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/skeleton/2.0.4/skeleton.min.css">
<link rel="stylesheet" href="style.css">
<title>Triangle particles - SkillBridges</title>
</head>
<body style="background: #2a2b32;" >
<div id="background"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/particles.js/2.0.0/particles.min.js"></script>
<script>
particlesJS("background", {
particles: {
number: {
value: 135,
density: {
enable: true,
value_area: 250,
},
},
color: {
value: "#ffffff",
},
shape: {
type: "triangle",
},
opacity: {
value: 0.8,
random: true,
anum: {
enable: true,
speed: 1,
opacity_min: 0.1,
sync: false,
},
},
size: {
value: 5,
random: true,
anim: {
enable: true,
speed: 4,
size_min: 0.3,
sync: false,
},
},
line_linked: {
enable: true,
distance: 150,
color: "#ffffff",
opacity: 0.4,
width: 1,
},
move: {
enable: true,
speed: 2,
direction: "none",
random: false,
straight: false,
out_mode: "bounce",
bounce: false,
},
},
retina_detect: true,
});
</script>
</body>
</html>
Out Put Of the above Code
Extra Effect:
interactivity: {
detect_on: "canvas",
events: {
onhover: {
enable: true,
mode: "repulse",
},
onclick: {
enable: true,
mode: "push",
},
resize: true,
},
},
Add this part of the code in the above javascript code to get this type of effect
