File: index.html

Recommend this page to a friend!
  Classes of Andras Toth  >  Material Design styled ripple effect  >  index.html  >  Download  
File: index.html
Role: Example script
Content type: text/plain
Description: example html
Class: Material Design styled ripple effect
Show the ripple effect on a given page element
Author: By
Last change: fix
Date: 5 years ago
Size: 3,538 bytes
 

Contents

Class file image Download
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>MD ripple effect</title>
        <meta name="mobile-web-app-capable" content="yes">
        <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, minimal-ui">
        <link href="http://roboto-webfont.googlecode.com/svn/trunk/roboto.all.css" rel="stylesheet" type="text/css">
        <link href="ripple-effect.css" rel="stylesheet" type="text/css">
        <link href="buttons.css" rel="stylesheet" type="text/css">
        <style type="text/css">
            body {
                text-align: center;
                background-color: #f9f9f9;
                font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial
            }
            .container{
                display:inline-block
            }
            .user-select-none{
                -moz-user-select: none;
                -ms-user-select: none;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
                -webkit-touch-callout: none;
                -webkit-transition: all .3s cubic-bezier(.4, 0, .2, 1);
                -webkit-user-select: none
            }
            .img-div {
                width: 300px;
                background-color: white;
                display: inline-block;
                cursor: pointer
            }
            marquee{
              right: 0;
              position: absolute;
              bottom: 0;
              width: 20%
            }
        </style>
    </head>
    <body>
        <h1>Give Material-design styled Ripple effect to anything</h1>
        <div class="container user-select-none">
            <button type="button" class="bt">Button</button> <a type="button" class="bt">Button</a>
            <md-button type="button">Button</md-button>
            <md-button type="button" class="bt-float">
                <svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 48">
                    <path fill="chartreuse" d="M35.3 12.7C32.41 9.8 28.42 8 24 8 15.16 8 8.02 15.16 8.02 24S15.16 40 24 40c7.45 0 13.69-5.1 15.46-12H35.3c-1.65 4.66-6.07 8-11.3 8-6.63 0-12-5.37-12-12s5.37-12 12-12c3.31 0 6.28 1.38 8.45 3.55L26 22h14V8l-4.7 4.7z"/>
                    <path d="M0 0h48v48H0z" fill="none"/>
                </svg>
            </md-button>
            <br>
            <br>
            <br>
            <div class="img-div user-select-none">
                <img src="http://files.jsclasses.org/graphics/jsclasses/logo-jsclasses.png">
            </div>
        </div>
        <marquee>
            RippleEffect 1.0.0&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Author: Tóth András&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Web: http://atandrastoth.co.uk&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            email: atandrastoth@gmail.com&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
            Licensed under the MIT license&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
        </marquee>
        <script src="ripple-effect.js" type="text/javascript"></script>
        <script>
            // var effect = new RippleEffect(event, root, item selectors).on();
            var effect = new RippleEffect('click', '.container', 'button, a, md-button, .img-div').on();
            //remove ripple effect: effect.off('click');
        </script>
    </body>
</html>