Ripple

Ripple adds an interactive click animation to clickable elements, giving users direct UI response to their actions on page.

• Markup
• Elements
• CSS Customization

Markup

To add a ripple to an element, add the .js-ripple class. The library will handle the rest for you. Here's an example using a simple image

<div class="js-ripple raised-1">
    <img alt="Trump" data-src="../../assets/img/trump-avatar.jpg" class="img-responsive js-lazyload lazyload grayscale" src="../../assets/img/trump-avatar_thumb.jpg" />
</div>

Elements

Ripple get added automatically to the following Frontbx components:

• .btn
• .list > li
• .pagination li a
• .tab-nav li a
• .card.primary-action
• .card .primary-action
• .card-media

To hide ripple on a given element, add the .no-ripple class:

<button class="btn no-ripple">.no-ripple</button>

CSS Customization

Ripple's default color is the current color of the element being clicked (aka the CSS currentColor keyword). If there are instances where you want a specific colored ripple you can change the color via the CSS variable on .ripple.

.ripple
{
    --fbx-ripple-color: rgba(0, 0, 255, 0.3);
}