Display a momentary full screen confetti overlay on page load or button click. This fun, celebratory effect is great for special pages, form submissions and buttons of all kinds.
Extensive customization options allow for full control of the look and duration. You can even mix in your own logo or icons!
Compatibility: Muse 2018.1
Current Version: 1.0
Supported Devices: Desktop, Tablet, Phone
1.0: Initial Release
WIDGET PLACEMENT IN MUSE
Drop the Particles widget onto your page. Placement of the widget is not important, as this is a full screen overlay effect. The widget is best placed out of the way, off canvas.
Open the widget option panel.
Maximum Confetti Count: This value sets the maximum amount of confetti seen on the screen at once. Use this parameter to set the general density of the confetti.
Confetti Size: Sets the size of the confetti.
Duration: Sets the amount of time the confetti will be seen.
Trigger Type: The confetti overlay may be triggered by button click or on page load.
Trigger Button Graphic Style: If using "On Trigger Click" setting, create a button in Muse, and apply a graphic style to the button. Enter the graphic style name in this field.
CONFETTI TYPE SECTION
Square/Circle/Triangle/Lines/SVG: These checkboxes allow you to enable various confetti shapes. Note that enabling SVG requires loading a Custom SVG in the settings below.
Custom SVG: You may use your own SVG. This is great for incorporating your logo or icon into the confetti.
See the "Optimizing SVGs" section below for improved performance across all browsers
CONFETTI TYPE SECTION
This section allows you to set 4 custom colors for the confetti.
Animate: Enable animation for individual confetti.
Speed: Sets the animation speed of the confetti.
Rotate: Enables rotation of the confetti.
SVG's are different from normal images because they are code-based vector files. Some browsers may not display SVG's properly without certain aspects being present in the SVG file code. We have found that it is best for the SVG to contain width and height settings in the code. Depending on where your SVG was sourced or created, it may not have the width and height defined in the code already.
It's easy to add width and height to your SVG: Simply open the SVG file in a text editor and locate the <svg version... line.
Paste this: width="" height="". Be sure to enter number values between the "". Such as width="25" height="25".
Make sure that "Smart Quotes" is disabled in your text editor