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:
<section data-settings="particles-1" class="crumina-flying-balls particles-js">..</section>
• 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.
In order to remove circles animation, please find the particles-js class and remove it from a file.
And add for the required section one of the three classes:
static-circle-bg1static-circle-bg2static-circle-bg3
These classes differ in the location on the screen, namely have different placement of background images.
Each of them has a predefined static background, so select the one that most relevant for your tasks.
4.1.2 Circle animation - "background-parallax" in footer section
This animation was implemented using the plugin parallax.js
GitHub -https://github.com/wagerfield/parallax
In order to add this animation to any section, you need:
-for the section add the class:"сrumina-parallax-background". Then, add the following code to the class:
<section class="сrumina-parallax-background"><div class="scene"> <div data-depth="0.2" class="layer first-layer"></div> <div data-depth="0.6" class="layer second-layer"></div> <div data-depth="1" class="layer third-layer"></div> </div> </section>
class = "scene" - the parent class responsible for animation initializing
class = "layer" -layers which animated between each other during moving a mouse. Each layer has own picture used as background.
Data-depth = "1" - the data-attribute responsible for the degree of layer displacement relative to each other
In order to deactivate it, you need to delete layers markup and classes, stated above- this action removes completely the circle animation, and layers with the circles as well.
If you want to deactivate the background animation and leave the background as a static, you just need to remove scene class from the markup page:
<section class="сrumina-parallax-background"><div> <div data-depth="0.2" class="layer first-layer"></div> <div data-depth="0.6" class="layer second-layer"></div> <div data-depth="1" class="layer third-layer"></div> </div></section>