https://gourav-portfolio.netlify.app/assets/js/particle.js

1/* ---- particles.js config ---- */
2
3particlesJS("particles-js", {
4  particles: {
5    number: {
6      value: 140,
7      density: {
8        enable: true,
9        value_area: 800,
10      },
11    },
12    color: {
13      value: ["#2EB67D", "#ECB22E", "#E01E5B", "#36C5F0"],
14    },
15    shape: {
16      type: "circle",
17      stroke: {
18        width: 0,
19        color: "#fff",
20      },
21      polygon: {
22        nb_sides: 5,
23      },
24      image: {
25        src: "https://cdn.freebiesupply.com/logos/large/2x/slack-logo-icon.png",
26        width: 100,
27        height: 100,
28      },
29    },
30
31    opacity: {
32      value: 1,
33      random: false,
34      anim: {
35        enable: false,
36        speed: 1,
37        opacity_min: 0.1,
38        sync: false,
39      },
40    },
41    size: {
42      value: 8,
43      random: true,
44      anim: {
45        enable: false,
46        speed: 10,
47        size_min: 10,
48        sync: false,
49      },
50    },
51    line_linked: {
52      enable: true,
53      distance: 150,
54      color: "#808080",
55      opacity: 0.4,
56      width: 1,
57    },
58    move: {
59      enable: true,
60      speed: 5,
61      direction: "none",
62      random: false,
63      straight: false,
64      out_mode: "out",
65      bounce: false,
66      attract: {
67        enable: false,
68        rotateX: 600,
69        rotateY: 1200,
70      },
71    },
72  },
73  interactivity: {
74    detect_on: "window",
75    events: {
76      onhover: {
77        enable: true,
78        mode: "repulse",
79      },
80      onclick: {
81        enable: true,
82        mode: "push",
83      },
84    },
85    modes: {
86      repulse: {
87        distance: 70,
88        duration: 0.4,
89      },
90      push: {
91        particles_nb: 4,
92      },
93    },
94  },
95  retina_detect: true,
96});
97const allElements = document.querySelectorAll(".animated-text");
98
99// It checks if there is at least one element
100if (allElements.length > 0) {
101  //It runs the script for each found element
102  allElements.forEach((element) => {
103    const txtElement = element,
104      wordsList = txtElement.getAttribute("data-words"),
105      words = wordsList.split(", "); // It makes an array of words from data attribute
106
107    let wordsCount = 0;
108
109    entry();
110
111    // Initial function
112    function entry() {
113      if (wordsCount < words.length) {
114        // It runs the code for each word
115        let word = words[wordsCount],
116          txtArr = word.split(""), // It makes an array of letters in the word
117          count = 0;
118
119        txtElement.textContent = ""; // It removes the previous text from the element
120
121        // For each letter in the array
122        txtArr.forEach((letter) => {
123          // It replaces the empty space for the "non-break-space" HTML...
124          // ... This is needed to separate the words properly
125          let _letter = letter === " " ? "&nbsp;" : letter;
126
127          // It wraps every letter with a "span" and puts all they back to the element
128          txtElement.innerHTML += `<span>${_letter}</span>`;
129        });
130
131        let spans = txtElement.childNodes;
132
133        // It sets the interval between each letter showing
134        const letterInterval = setInterval(activeLetter, 70);
135
136        function activeLetter() {
137          spans[count].classList.add("active");
138          count++;
139
140          if (count === spans.length) {
141            clearInterval(letterInterval);
142
143            // It waits 4 seconds to start erasing the word
144            setTimeout(() => {
145              eraseText();
146            }, 600);
147          }
148        }
149
150        function eraseText() {
151          // It sets the interval between each letter hiding
152          let removeInterval = setInterval(removeLetter, 40);
153          count--;
154
155          function removeLetter() {
156            spans[count].classList.remove("active");
157            count--;
158
159            if (count === -1) {
160              clearInterval(removeInterval);
161              wordsCount++;
162
163              // After removing the last letter, call the initial function again
164              entry();
165            }
166          }
167        }
168      } else {
169        // If the code reaches the last word
170        // It resets the words counter...
171        wordsCount = 0;
172        // ...and calls the initial function again.
173        entry();
174      }
175    }
176  });
177}