<!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
Author: Tóth András
Web: http://atandrastoth.co.uk
email: atandrastoth@gmail.com
Licensed under the MIT license
</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>
|
Download
