Waves

Click effect inspired by Google's Material Design

v0.7.4

See the examples
Hint: click button or background
;

Examples

Buttons

Button A

Button A

Icons

DIVs & Images

Flat Box
Float Box

Image Source: © Moyan Brenn. Flickr

Action/Event

Works fully with jQuery and JavaScript click event handlers, like Snarl

;

Buttons

<style>
    #colored-button .btn { color: #fff; }
    #colored-button a, 
    #colored-button a:hover { background: #01BCFF; }
    #colored-button button,
    #colored-button button:hover { background: #1bb556; }
    #colored-button input,
    #colored-button input:hover { background: #ff4f0f; }
</style>

<p class="text-center">
    <a class="flat-buttons">Button A</a>
    <button class="flat-buttons">Button B</button>
    <input class="flat-buttons" type="submit" value="Button C">
</p>

<p id="colored-button" class="text-center">
    <a class="btn float-buttons">Button A</a>
    <button class="btn float-button-light">Button B</button>
    <input class="btn float-buttons" type="submit" value="Button C">
</p>

<script type="text/javascript">
    Waves.attach('.flat-buttons', ['waves-button']);
    Waves.attach('.float-buttons', ['waves-button', 'waves-float']);
    Waves.attach('.float-button-light', ['waves-button', 'waves-float', 'waves-light']);
</script>

Icons

<style>
    #colored-icon i { color: #fff; }
    #colored-icon i:nth-child(1) { background: #ff6400; }
    #colored-icon i:nth-child(2) { background: #d54f38; }
    #colored-icon i:nth-child(3) { background: #eb4d7e; }
    #colored-icon i:nth-child(4) { background: #d138c8; }
    #colored-icon i:nth-child(5) { background: #bd73ff; }
    #colored-icon i:nth-child(6) { background: #0074d6; }
</style>

<p class="text-center">
    <i class="fa fa-bars flat-icon"></i>
    <i class="fa fa-bookmark flat-icon"></i>
    <i class="fa fa-calendar flat-icon"></i>
    <i class="fa fa-envelope flat-icon"></i>
    <i class="fa fa-exclamation flat-icon"></i>
    <i class="fa fa-folder flat-icon"></i>
</p>

<p id="colored-icon" class="text-center">
    <i class="fa fa-bars float-icon"></i>
    <i class="fa fa-bookmark float-icon-light"></i>
    <i class="fa fa-calendar float-icon"></i>
    <i class="fa fa-envelope float-icon-light"></i>
    <i class="fa fa-exclamation float-icon"></i>
    <i class="fa fa-folder float-icon-light"></i>
</p>

<script type="text/javascript">
    Waves.attach('.flat-icon', ['waves-circle']);
    Waves.attach('.float-icon', ['waves-circle', 'waves-float']);
    Waves.attach('.float-icon-light', ['waves-circle', 'waves-float', 'waves-light']);
</script>

DIVs & Images

<div class="boxes flat-box">Flat Box</div>
<div class="boxes float-box">Float Box</div>
<div class="clear"></div>

<p class="text-center">
    <img class="waves-image" src="https://farm2.staticflickr.com/1297/1091511802_2fb2451ecc_n.jpg">
</p>

<script type="text/javascript">
    Waves.attach('.flat-box', ['waves-block']);
    Waves.attach('.float-box', ['waves-block', 'waves-float']);
    Waves.attach('.waves-image');
</script>

Action/Event

<style>
    #snarl-demo {
        background:#04d654;
        color: #fff;
    }
</style>
                        
<p class="text-center">
    <button id="snarl-demo">Click Me!</button>
</p>
                        
<script type="text/javascript">
    Waves.attach('#snarl-demo', ['waves-button', 'waves-float']);

    Snarl.setDefaultOptions({
        timeout: 5000
    });

    $('#snarl-demo').click(function() {
        Snarl.addNotification({
            title: 'Snarl Notification',
            text: 'You clicked the Waves button!'
        });
    });
</script>
;

Getting Started

Download the latest version of Waves from Github repository. You can also install it via Bower with bower install waves or via npm with npm install node-waves. Include waves.min.css and waves.min.js to your HTML file and Waves is ready to use!

<!DOCTYPE html>
<html>
    <head>
        <title>Waves example</title>

        <link rel="stylesheet" type="text/css" href="/path/to/waves.min.css" />

    </head>
    <body>
        <a href="#" class="button">Click Here</a>

        <script type="text/javascript" src="/path/to/waves.min.js"></script>
    </body>
</html>

Advanced:
Waves also provide LESS, SCSS, and SASS source. So, feel free to used it :)

Attach the effect

To attach Waves's effect (or we usually called it as "the ripple") to HTML element, you can use Waves.attach()

<a href="#" class="button">Click Here</a>
                
<script type="text/javascript">
    Waves.attach('.button');
</script>         

Waves.attach() comes with 2 parameters, the first is DOM element that you want to be attached (or string that represent it, like jQuery), and the second one is array of CSS classes that will be put on the element.

<a href="#" class="button">Click Here</a>
                
<script type="text/javascript">
    Waves.attach('.button', ['waves-button', 'waves-float']);
</script>         

Initialize

After you attach Waves to your HTML element, you can initialize Waves with Waves.init() to start the effect. You can also configure Waves by passing option parameter on Waves.init(). Please see API page for further information.

<a href="#" class="button">Click Here</a>
                
<script type="text/javascript">
    Waves.attach('.button', ['waves-button', 'waves-float']);
    Waves.init();
</script>         

Waves is designed to be flexible. It means you still be able to attach the effect to another element after Waves.init().

<a href="#" class="button">Click Here</a>
                
<script type="text/javascript">
    // This is ok.
    Waves.init();
    Waves.attach('.button', ['waves-button', 'waves-float']);
</script>         

Helper classes

In a couple examples above, you already see some Waves classes on Waves.attach(). Waves provide several classes to help you styling your effect. Here we go.

Quick Fix

IE Tap highlight on Windows Phone

By default if you access a web page using IE in Windows Phone, you will get tap highlight effect when you tapping a link or button and this highlight will shadowed Waves effect. To prevent this thing happen, you will need to add msapplication-tap-highlight meta tag on your header.

<!DOCTYPE html>
<html>
    <head>
        <!-- Remove Tap Highlight on Windows Phone IE -->
        <meta name="msapplication-tap-highlight" content="no"/>

        <title>Your Web Page</title>

        <link rel="stylesheet" type="text/css" href="/path/to/waves.css" />
    </head>
    <body>

        <script type="text/javascript" src="/path/to/waves.js">\</script\>
        <script type="text/javascript">
            Waves.init();
        </script>
    </body>
</html>
;

API

Waves.init(config)

Initialise Waves with an optional config.

Arguments

var config = {
    // How long Waves effect duration 
    // when it's clicked (in milliseconds)
    duration: 500,

    // Delay showing Waves effect on touch
    // and hide the effect if user scrolls
    // (0 to disable delay) (in milliseconds)
    delay: 200
};
                
// Initialise Waves with the config
Waves.init(config);

Waves.attach(elements, classes)

Attach ripple effect by adding .waves-effect to HTML element. Make sure you call Waves.init() to activated the ripple.

Arguments

// Adds .waves-effect and .waves-light to <button> elems
Waves.attach('button', 'waves-light');
                
// Make .box ripple when user moves the mouse over it
// with no additional classes
Waves.attach('.box', null);

Waves.ripple(elements, options)

Create a ripple effect in HTML element programmaticaly.

Arguments

// Default values for options
var options = {
    wait: 0,        // null = infinite
    position: null  // null = centre
};
// Cause a ripple to occur on .box
Waves.ripple('.box');
                
// Ripple with a 1s delay between starting
// and stopping the ripple, centred at 
// (20px, 20px) inside .box
var options = {
    wait: 1000, //ms
    position: { // This position relative to HTML element.
        x: 20, //px
        y: 20  //px
    }
};
Waves.ripple('.box', options);

Waves.calm(elements)

Remove all ripples from inside an element immediately.

Arguments

// Cause a non-terminating ripple at centre of .box
Waves.ripple('.box', {wait: null});
                
// ...
                
// Clear all ripples from .box
Waves.calm('.box');
                
// Ripple on hover
$('button').mouseenter(function() {
    Waves.ripple(this, {wait: null});
}).mouseleave(function() {
    Waves.calm(this);
});
;

FAQ

Browser support?

Can I make Waves better?

Yes, I strongly encourage you to contribute to make Waves better. So, if you find a bug, or have nice idea for Waves development, please mention me.

;