Particles

  • QUICK TIP:
    Review the Basic Template Setup for information about how to setup a custom production environment.
To get started with the Particles Add-On, first add the "revolutions-addons" folder into your production site:
Next, add the Particles stylesheet and script. The script should placed below all other scripts on the page.

Next, assign a variable to your slider's main settings script, and then call the Particles Add-On as shown in the following example.

Next, add one of the Particles templates below to your slider's main JavaScript settings as shown in the following example:

Settings Templates:
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: true, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 2, random: false, min: 30, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: true, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 6, direction: "none", random: true, min_speed: 6, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: false, mode: "repulse"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 120}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: true, min: 0.25, anim: {enable: false, speed: 10, opacity_min: 0, sync: false}}, size: {value: 1, random: true, min: 0.05, anim: {enable: true, speed: 7, size_min: 0, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 6, direction: "none", random: false, min_speed: 2, straight: true, out_mode: "out"}}, interactivity: { events: {onhover: {enable: false, mode: "repulse"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.6, random: true, min: 0.2, anim: {enable: false, speed: 7, opacity_min: 0.1, sync: false}}, size: {value: 1, random: true, min: 0.05, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 5, direction: "top-right", random: false, min_speed: 4, straight: true, out_mode: "out"}}, interactivity: { events: {onhover: {enable: false, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 0.75}, image: {src: ""} }, opacity: {value: 0.75, random: true, min: 0.25, anim: {enable: false, speed: 6, opacity_min: 0.2, sync: true}}, size: {value: 10, random: true, min: 1, anim: {enable: true, speed: 80, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 12, direction: "none", random: true, min_speed: 4, straight: false, out_mode: "bounce"}}, interactivity: { events: {onhover: {enable: true, mode: "grab"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: false, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 2, random: false, min: 30, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 6, direction: "none", random: true, min_speed: 6, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: true, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.5}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 60}, color: {value: "#ffffff"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: true, min: 0.1, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 20, random: true, min: 2, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 5, direction: "top", random: true, min_speed: 2, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: false, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.5}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 20}, color: {value: "#cf3fff,#569fff,#ff0202"}, shape: { type: "image", stroke: {width: 1, color: "#ffffff", opacity: 0.75}, image: {src: "M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"} }, opacity: {value: 0.75, random: true, min: 0.5, anim: {enable: false, speed: 3, opacity_min: 0.2, sync: false}}, size: {value: 60, random: true, min: 20, anim: {enable: false, speed: 40, size_min: 25, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 6, direction: "none", random: true, min_speed: 6, straight: false, out_mode: "bounce"}}, interactivity: { events: {onhover: {enable: false, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 50}, color: {value: "#ffffff"}, shape: { type: "star", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: true, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 15, random: true, min: 5, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: false, speed: 6, direction: "none", random: true, min_speed: 6, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: false, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.5}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 40}, color: {value: "#ed15f4,#f4ed15,#15f4ee"}, shape: { type: "star", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.5, random: true, min: 0.25, anim: {enable: true, speed: 10, opacity_min: 0, sync: false}}, size: {value: 5, random: false, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 6, direction: "none", random: true, min_speed: 2, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: true, mode: "repulse"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.4}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 10}, color: {value: "#ffffff"}, shape: { type: "image", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: "M22 12l-4-4v3H3v2h15v3z"} }, opacity: {value: 0.8, random: true, min: 0.4, anim: {enable: false, speed: 7, opacity_min: 0.1, sync: false}}, size: {value: 80, random: true, min: 30, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 150, color: "#ffffff", opacity: 0.4, width: 1}, move: {enable: true, speed: 12, direction: "right", random: true, min_speed: 6, straight: true, out_mode: "out"}}, interactivity: { events: {onhover: {enable: false, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 40, opacity: 0.01}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#000000"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.3, random: false, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 10, random: true, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: true, distance: 200, color: "#000000", opacity: 0.2, width: 1}, move: {enable: true, speed: 3, direction: "none", random: true, min_speed: 3, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: true, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 150, opacity: 1}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 80}, color: {value: "#000000"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.3, random: false, min: 0.25, anim: {enable: false, speed: 3, opacity_min: 0, sync: false}}, size: {value: 10, random: true, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: true, distance: 200, color: "#000000", opacity: 0.2, width: 1}, move: {enable: true, speed: 3, direction: "none", random: true, min_speed: 3, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: true, mode: "bubble"}, onclick: {enable: false, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 150, opacity: 1}, repulse: {distance: 200}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 100}, color: {value: "#000000"}, shape: { type: "triangle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.3, random: true, min: 0.1, anim: {enable: false, speed: 1, opacity_min: 0, sync: false}}, size: {value: 10, random: true, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: false, distance: 200, color: "#000000", opacity: 0.2, width: 1}, move: {enable: true, speed: 1, direction: "top", random: true, min_speed: 3, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: true, mode: "bubble"}, onclick: {enable: true, mode: "repulse"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 0, opacity: 0.05}, repulse: {distance: 500}} } },
particles: {startSlide: "first", endSlide: "last", zIndex: "1", particles: { number: {value: 300}, color: {value: "#000000"}, shape: { type: "circle", stroke: {width: 0, color: "#ffffff", opacity: 1}, image: {src: ""} }, opacity: {value: 0.1, random: false, min: 0.25, anim: {enable: false, speed: 1, opacity_min: 0, sync: false}}, size: {value: 1, random: true, min: 0.5, anim: {enable: false, speed: 40, size_min: 1, sync: false}}, line_linked: {enable: true, distance: 80, color: "#000000", opacity: 0.35, width: 1}, move: {enable: true, speed: 1, direction: "right", random: true, min_speed: 3, straight: false, out_mode: "out"}}, interactivity: { events: {onhover: {enable: true, mode: "repulse"}, onclick: {enable: true, mode: "bubble"}}, modes: {grab: {distance: 400, line_linked: {opacity: 0.5}}, bubble: {distance: 400, size: 100, opacity: 1}, repulse: {distance: 75}} } },
Settings Descriptions:
  • startSlide"first" Number (2, 3, etc.)
    Start the animation on a specific slide
  • endSlide"last" Number (3, 4, etc.)
    End the animation on a specific slide
  • zIndexNumber (1, 999, etc.)
    Set a custom CSS z-index for the Particles HTML div container if desired.
  • numberThe number of particles to animate
  • colorThe main color(s) for each particle. See the special notes below for an example with multiple colors.
  • shape -> type"circle" "edge" "triangle" "polygon" "star" "image"
    The particle icon to display. Use "shape" for a custom SVG (see the special notes below for example)
  • shape -> strokeApply a CSS border to the icon. Enter "0" for the "width" option for no border.
  • shape -> imageWhen custom svg's are used, the svg markup will be entered here (see the special notes below for example)
  • opacity -> valueNumber (0-1)
    CSS opacity for the icons
  • opacity -> randomtrue false
    Randomize the opacity for each particle
  • opacity -> minNumber (0-1)
    The minimum opacity to apply when "random" is chosen above (default opacity value above will serve as the max-opacity)
  • opacity -> animContinuously animate the opacity levels for each particle
  • size -> valueNumber
    The default size for the particle icons
  • size -> randomtrue false
    Randomize the size for each particle
  • size -> minNumber (0-1)
    The minimum size to scale to when "random" is chosen above (default size value above will serve as the max-size)
  • size -> animContinuously animate the particle sizes for each icon
  • line_linkedConnects the particles with a line graphic within a certain range of each other (via the distance option)
  • moveIf the particles should move together toward a certain direction
  • move -> direction"none" "random" "top" "right" "bottom" "left" "top-left" "top-right" "bottom-left" "bottom-right"
  • move -> straighttrue false
    Applicable for when the direction above is set to a side or corner. Will allow for variations in movement for each particle
  • move -> out_mode"out" "bounce"
    "when "out" is used the particles will float in and out of the slider, and "bounce" creates a ping-pong effect.
  • interactivity -> eventsEnable onhover or click events for the particles
  • interactivity -> modesThe available modes that can be applied for the events above

Special Notes:

Use an icon from the "assets/svg/" folder

Any icon from the svg folder included with the plugin’s download package can be used for the Particles effect.  To use an icon, from “assets/svg/” folder, open the svg file in your favorite text editor and copy the code inside the “d=” part.  So in the following example:

The part to copy would be:

Next, set the “shape -> type” to “image”, and then enter the svg code (the “d=” part) as the “src” option:

Use multiple colors for any color option:

To use more than one color for any color option, write the hex values separated by commas: