Slider Revolution Magento 2.x Extension Documentation

Particles AddOn

Add Particle Effects to your Slides for enhanced visuals.

AddOns Requirements

Particles is a Premium AddOn that requires Purchase Code Registration and Activation. The effect is available for your Module's Slides.

Contents

1. Enable Particle Effects

The Particles Effect can be enabled for each of your Module's Slides.

2. Particle Effects Library

Select a preset from the Particles Effects Library to load its settings.

The if you've adjusted the settings and want to save them for usage on another Slide or Module, you can save your settings as your own custom template.

The new custom template will be listed in the "Custom Presets" section, where its name can be changed, settings overridden or deleted.

3. Particle Settings

Particles
Style
Movement
Interactivity
Pulse

1. Particle Icon
Select one or more icons to display in the effect.

2. SVG Library
Select from 900+ icons to use in the effect.

3. Number of Particles
The maximum number of particles to display at any given time.

4. Particle Size
The size of each particle in pixels.

5. Random Sizes
Randomize the particle sizes.

6. Minimum Size
The minimum size for randomized sizes.

7. Disable on Mobile
Disable the effect on mobile devices.

1. z-Index
Set a custom CSS z-index for the particle's HTML Canvas element.  

2. Particle Colors
Select one or multiple colors for the particles.  Multiple colors will be alternated between particles.

3. Opacity
The transparency level of the particles (0-100).

4. Random Opacity
Randomize the transparency for each particle.

5. Minimum Opacity
The minimum opacity to apply when the opacity is randomized.

6. Borders & Strokes
Add borders and strokes to the particle SVGs.

7. Border Colors
Choose one or more colors for the border/stroke.  Multiple colors will be alternated between particles.

8. Border Size
The "stroke-width" for the particle's SVGs.

9. Border Opacity
A transparency level for the SVG's border (0-100).

10. Connected Lines
Connect each particle with lines, creating a spider-web type visual.

11. Connected Line Colors
Choose one or more colors for hte connected lines.  Multiple colors will be alternated between particles.

12. Connected Line Width
The size of the line in pixels.

13. Connected Line Opacity
The transparency level of the connected lines (0-100).

14. Distance Between Particles
The amount of space that needs to exist before a two particles are connected with lines.

1. Particle Movement
Most of the time you will want your particles to move for the effect, but they can also appear as a static image if this option is disabled.

2. Speed
The speed at which the particles move.

3. Varying Speed
Randomize the speed at which the particles move. 

4. Min. Speed
The minimum speed the particles will move if the movement is randomized.

5. Bounce
Choose if the particles should disappear when they reach the module's bounding box, or if they should "bounce" off the walls and continue to move in another direction.

6. Direction
Particles can move in a linear direction (up, down, top-right, etc.) or move in a random direction.

Users can interact with the Particles on mouse-hover and click.  "Repulse", "Grab" and "Bubble" are available for mouse-hovers and "Repulse" and "Bubble" for clicks.  Give each a try to see what type of user-interaction effects are best suited for your project.

Repulse Effect

1. Repulse Distance
The distance at which the particles will jump to in random directions away from the mouse.

2. Repulse Easing
The strength at which the particles will move.  For example, if "100" is entered, particles will start to move at a speed of "100" and then the speed will gradually be reduced to zero as the repulse effect takes place.

Grab Effect

1. Grab Distance
The maximum distance the particles need to be from the mouse before the connected lines are drawn.

2. Grab Opacity
The opacity level for the connected lines when the grab effect takes place.

Bubble Effect

1. Bubble Distance
The maximum distance the particles need to be from the mouse before the particles are scaled.

2. Bubble Size
The maximum size in pixels the particles will scale to.

3. Bubble Opacity
The transparency level of the scaled particles.

1. Animate Particle Size
Choose to continuously animate the particles size.

2. Speed
The speed in milliseconds the particle's size will animate.

3. Minimum Size
The smallest size in pixels the particles will animate to.

4. Synchronize
Enable this option to animate all particles size at the same time (otherwise they will animate randomly).

5. Animate Particle Opacity
Choose to continuously animate the particles transparency levels.

6. Speed
The speed in milliseconds the particle's opacity will animate.

7. Minimum Opacity
The lowest opacity level the particles will animate to.

8. Synchronize
Enable this option to animate the opacity level of all particles at the same time (otherwise they will animate randomly).