Circle animation

4.1.1 "Soaring " circle animation

This animation was implemented by using the plugin particals.js

GitHub -https://github.com/VincentGarreau/particles.js

In order to add this animation to any section, you need:

- for the section add the following classes and 1 data attribute:

• “data-settings="particles-1" - data-attribute specifies file name(here is our example ..\src\js\particles-1.json), which is responsible for the settings parameters for animation. (here you can set the number of elements, shape, color, etc.)

In order to get more detailed information, you can read the official documentation, moreover, you can generate online any animation and get ready json with settings: https://vincentgarreau.com/particles.js/

• «crumina-flying-balls particles-js” — classes, that are responsible for plugin initializing and styles

Note: Since the plugin generates the canvas for drawing elements, we strongly do not recommend placing this animation on too "high" sections (> screen heights), because this may affect the loading of the GPU.

In order to deactivate it, you need to delete classes stated above.

4.1.2 Circle animation in footer section

This animation was implemented using js function, which is in main.js file

/* -----------------------

* Spinner animation

* https://codepen.io/funxer/pen/Zvjebx

* --------------------- */

CRUMINA.spinnerAnimation = function () {…}

In order to deactivate this animation, you need to remove the next code from HTML markup:

<canvas id="can"></canvas>,

which you can find in this section:

…

</footer>