Ripple Effect Widget - For Adobe Muse CC

Add a ripple effect to rectangles in Adobe Muse

• created: 05/23/2016
• latest update: 05/26/2016
• by: John Ramos - Muse For You
• email: john@museforyoushop.com

Welcome to Ripple Effect Widget by Muse For You

The Ripple Effect Widget allows you to add a ripple effect to rectangles in your Adobe Muse website. Set the rectangle to 100% width to fill the entire browser width or add the ripples to custom sized rectangles.

When adding the widget add the "Ripple Effect - Add First," widget to the top of your Adobe Muse website. Afterwards you can add the "Ripple Effect Widget" for each individual ripple effect.

The widget works by assigning the graphic style name from the widget to a rectangle on your Adobe Muse website via the graphic styles panel. The widget options are below.

GRAPHIC STYLE

Graphic Style Name - The graphic style name that corresponds with the rectangle you want to apply the ripple effect to.

OPTIONS

Wave Length - Set the wave Length. A numeric value. The higher the number, the smaller the wave length. Default: 340.

Canvas Width (px) - Set the width of the water. Default is 100% of the rectangles width when set to 0.

Canvas Height (px) - Set the height of the water. Default is 50% of the rectangles height when set to 0.

Water Color - Set the color of the water.

Raindrop Frequency - Set the raindrops frequency. Higher number means more frequent raindrops. Default: 3.

Wave Height (px) - Set the wave height. Higher number means higher waves created by raindrops. Default: 100.

Density - Set the water density. Higher number means shorter ripples. Default: 0.02.

Ripple Speed - Set the speed of the ripple effect. Higher number means faster ripples. Default: 0.1.

Right Padding - This option is to cover unwanted gaps created by the animation. Default: 20. If you would like the ripple effect to extend past 100% add more padding. This will ensure that the ripple effect is visible even when the user makes the browser larger.

The widget works by assigning the graphic style name from the widget to a rectangle on your Adobe Muse website via the graphic styles panel. For each additional ripple effect change the graphic style name in the widget and apply it to the additional rectangle.

• The rectangle must have a fill color. The fill color can be white.

• To cover the entire browser width set the size of the rectangle to 100% width by going to to "Resize" in Adobe Muse and selecting "Stretch to Browser Width."

• Leave the "Canvas Width" at 0 to have it fill the entire width of the rectangle.

• Leave the "Canvas Height" at 0 to have the rectangle be filled at half the height.

• To fill the entire height of the rectangle enter the height of the rectangle times two in the "Canvas Height" widget option. If your rectangle is 100 pixels in height you would enter in 200 in the "Canvas Height" widget option. It is recommended not to fill the entire rectangle height so the ripple effect has room to ripple within the rectangle.

• To make the width of the rectangle larger then the browser width add more width to the "Right Padding" widget option. This will ensure that the ripple effect does not get cut off if the user makes the browser larger.

I've used the following images, icons or other files as listed.

• Raindrops.js code by Daniella Harel and Greg McAusland - http://daniellaharel.com/raindrops/

Once again, thank you so much for purchasing this widget. I'd be glad to help you if you have any questions relating to this widget. If you have a more general question relating to this widget, you might consider visiting the forums and asking your question in the "Item Discussion" section.

-John Ramos

Muse For You