Ripples
Otherwise known as waves, this component adds a fancy ripple effect to element click/hovers.
Usage
There are two ways to instantiate the component once the relevant JS and CSS have been included: via a data attribute, or simply with classes.
Example
Click me Click me Hover and click me I'm light! I'm floating!
Click me I'm simple Click me One Ripple At Once Hover me
Images
Other Elements
-
A Panel
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi provident sed inventore atque deserunt ut, est accusamus magni doloribus reprehenderit.
-
A Panel
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi provident sed inventore atque deserunt ut, est accusamus magni doloribus reprehenderit.
Markup
<a href="#" class="f-btn" data-f-ripple>Click me</a>
<a href="#" class="f-btn f-ripple">Click me</a>
JavaScript Options
This is an example of how to set options via attribute/classes:
data-f-ripple="{hover:true}"
or
class="f-ripple f-ripple-hover"
Option | Possible value | Default | Description | Class |
---|---|---|---|---|
only_one |
boolean | false | Whether to only show one ripple at once | n/a |
light |
boolean | false | Show a light overlay | f-ripple-light |
classic |
boolean | false | No gradient for the ripple effect | f-ripple-classic |
hover |
boolean | false | Triggers on button hover | f-ripple-hover |
float |
boolean | false | Adds a 'float' animation | f-ripple-float |