QUICK TIP:
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.
<!-- 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.
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:
var slider = jQuery('#rev_slider_1').show().revolution({
/* **************************** */
/* REGULAR SLIDER SETTINGS HERE */
/* **************************** */
/* **************************** */
/* PARTICLE SETTINGS HERE */
/* **************************** */
});
Settings Templates:
- 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:
- "first"
- Number (2, 3, etc.)
- "last"
- Number (3, 4, etc.)
- Number (1, 999, etc.)
- "circle"
- "edge"
- "triangle"
- "polygon"
- "star"
- "image"
- Number (0-1)
- true
- false
- Number (0-1)
- Continuously animate the opacity levels for each particle
- Number
- true
- false
- Number (0-1)
- "none"
- "random"
- "top"
- "right"
- "bottom"
- "left"
- "top-left"
- "top-right"
- "bottom-left"
- "bottom-right"
- true
- false
- "out"
- "bounce"
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:
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:
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:
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... */
/* ****************************** */
}
}