Skip to content

Commit 2c92068

Browse files
RamakrushnaBiswalRamakrushnaBiswal
committed
particle.js added in the home screen
1 parent 14fbdb4 commit 2c92068

3 files changed

Lines changed: 121 additions & 2 deletions

File tree

‎website2.0/index.html‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@
6565
</style>
6666

6767
</head>
68-
<body>
68+
<body >
6969
<header>
7070
<nav>
7171
<a href="index.html">
@@ -99,7 +99,7 @@
9999
<li><a href="contactus.html">Contact</a></li>
100100

101101
</ul>
102-
<main>
102+
<main id="particles-js">
103103
<div class="main-content">
104104
<div class="conte">
105105

@@ -160,5 +160,11 @@ <h1>HelpOps-Hub</h1>
160160
const annotation = annotate(e, { type: 'highlight', color: '#fff'});
161161
annotation.show();
162162
</script>
163+
<script src="https://cdn.jsdelivr.net/npm/particles.js@2.0.0/particles.min.js"></script>
164+
<script>
165+
particlesJS.load('particles-js', 'particlesjs-config.json', function() {
166+
console.log('callback - particles.js config loaded');
167+
});
168+
</script>
163169
</body>
164170
</html>

‎website2.0/particlesjs-config.json‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
{
2+
"particles": {
3+
"number": {
4+
"value": 90,
5+
"density": {
6+
"enable": true,
7+
"value_area": 800
8+
}
9+
},
10+
"color": {
11+
"value": "#f9f9f9"
12+
},
13+
"shape": {
14+
"type": "triangle",
15+
"stroke": {
16+
"width": 0,
17+
"color": "#000000"
18+
},
19+
"polygon": {
20+
"nb_sides": 12
21+
}
22+
},
23+
"opacity": {
24+
"value": 0.5,
25+
"random": true,
26+
"anim": {
27+
"enable": false,
28+
"speed": 1,
29+
"opacity_min": 0.1,
30+
"sync": false
31+
}
32+
},
33+
"size": {
34+
"value": 3,
35+
"random": true,
36+
"anim": {
37+
"enable": false,
38+
"speed": 40,
39+
"size_min": 0.1,
40+
"sync": false
41+
}
42+
},
43+
"line_linked": {
44+
"enable": true,
45+
"distance": 150,
46+
"color": "#ffffff",
47+
"opacity": 0.4,
48+
"width": 1
49+
},
50+
"move": {
51+
"enable": true,
52+
"speed": 6,
53+
"direction": "none",
54+
"random": false,
55+
"straight": false,
56+
"out_mode": "out",
57+
"bounce": false,
58+
"attract": {
59+
"enable": false,
60+
"rotateX": 600,
61+
"rotateY": 1200
62+
}
63+
}
64+
},
65+
"interactivity": {
66+
"detect_on": "window",
67+
"events": {
68+
"onhover": {
69+
"enable": true,
70+
"mode": "repulse"
71+
},
72+
"onclick": {
73+
"enable": true,
74+
"mode": "repulse"
75+
},
76+
"resize": true
77+
},
78+
"modes": {
79+
"grab": {
80+
"distance": 400,
81+
"line_linked": {
82+
"opacity": 1
83+
}
84+
},
85+
"bubble": {
86+
"distance": 400,
87+
"size": 40,
88+
"duration": 2,
89+
"opacity": 8,
90+
"speed": 3
91+
},
92+
"repulse": {
93+
"distance": 200,
94+
"duration": 0.4
95+
},
96+
"push": {
97+
"particles_nb": 4
98+
},
99+
"remove": {
100+
"particles_nb": 2
101+
}
102+
}
103+
},
104+
"retina_detect": true
105+
}

‎website2.0/styles.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -391,3 +391,11 @@ p {
391391
margin: 20px;
392392
font-family:cursive;
393393
}
394+
canvas{
395+
position: absolute;
396+
top: 0;
397+
left: 0;
398+
width: 100%;
399+
height: 100%;
400+
z-index: -1;
401+
}

0 commit comments

Comments
 (0)