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: 8 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>