Looking for mind-blowing effects? 🤯 Explore Slider Revolution's advanced WebGL animations

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:

back to top

Next, add the Particles stylesheet and script. The script should placed below all other scripts on the page.

back to top


<!-- PARTICLES STYLESHEET -->
<link rel="stylesheet" type="text/css" href="revolution-addons/particles/css/revolution.addon.particles.css" />


<!-- PARTICLES SCRIPT -->
<script type="text/javascript" src="revolution-addons/particles/js/revolution.addon.particles.min.js"></script>

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

back to top


var slider = jQuery('#rev_slider_1').show().revolution({

/* **************************** */
/* REGULAR SLIDER SETTINGS HERE */
/* **************************** */

});

/*
Instantiate the Particles AddOn
Args: slider reference (assigned above)
*/
RsParticlesAddOn(slider);

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

back to top


var slider = jQuery('#rev_slider_1').show().revolution({

/* **************************** */
/* REGULAR SLIDER SETTINGS HERE */
/* **************************** */

/* **************************** */
/* PARTICLE SETTINGS HERE */
/* **************************** */

});

Settings Templates:

back to top
  • Spider Web
  • Starry Night
  • Floating in Space
  • Science Class
  • Hover Bubbles
  • Soda Bubbles
  • Valentines Day
  • Static Stars
  • Kids Stars
  • Moving Markets
  • Particle Effect One
  • Particle Effect Two
  • Particle Effect Three

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: 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:

back to top
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
zIndex
  • Number (1, 999, etc.)
Set a custom CSS z-index for the Particles HTML div container if desired.
number
    The number of particles to animate
    color
      The 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 -> stroke
        Apply a CSS border to the icon. Enter "0" for the "width" option for no border.
        shape -> image
          When custom svg's are used, the svg markup will be entered here (see the special notes below for example)
          opacity -> value
          • Number (0-1)
          CSS opacity for the icons
          opacity -> random
          • true
          • false
          Randomize the opacity for each particle
          opacity -> min
          • Number (0-1)
          The minimum opacity to apply when "random" is chosen above (default opacity value above will serve as the max-opacity)
          opacity -> anim
          • Continuously animate the opacity levels for each particle
          size -> value
          • Number
          The default size for the particle icons
          size -> random
          • true
          • false
          Randomize the size for each particle
          size -> min
          • Number (0-1)
          The minimum size to scale to when "random" is chosen above (default size value above will serve as the max-size)
          size -> anim
            Continuously animate the particle sizes for each icon
            line_linked
              Connects the particles with a line graphic within a certain range of each other (via the distance option)
              move
                If 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 -> straight
                • true
                • 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 -> events
                  Enable onhover or click events for the particles
                  interactivity -> modes
                    The available modes that can be applied for the events above


                    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: 1,
                    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}
                    }
                    }
                    }

                    Special Notes:

                    back to top

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

                    back to top

                    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:


                    M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z

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


                    particles: {
                    startSlide: "first",
                    endSlide: "last",
                    zIndex: "1",
                    particles: {
                    number: {value: 80},
                    color: {value: "#ffffff"},
                    shape: {

                    /* set this to "image" for a custom svg icon */
                    type: "image",

                    /* enter the svg code (the "d=" part) here */
                    image: {src: "M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"},

                    stroke: {width: 0, color: "#ffffff", opacity: 1}

                    },
                    /* ****************************** */
                    /* particle settings continued... */
                    /* ****************************** */
                    }
                    }

                    Use multiple colors for any color option:

                    back to top

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


                    particles: {
                    startSlide: "first",
                    endSlide: "last",
                    zIndex: "1",
                    particles: {
                    number: {value: 80},

                    /* to use multiple colors include them separated by commas as shown here */
                    color: {value: "#ff3a2d,#007aff,#ffffff"},

                    /* ****************************** */
                    /* particle settings continued... */
                    /* ****************************** */
                    }
                    }

                    Popular Solutions

                    [ess_grid alias="wp-popular-solutions"]
                    Impressum | Datenschutz