Ripple.js

2018-08-12 admin

Ripple.js是什么

什么是Ripple.js,Adds Material style ripple to buttons, links

Ripple.js介绍、Ripple.js使用

Adds Material style ripple to buttons

Installation

<link href="stylesheet" type="text/css" href="ripple.min.css">
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="ripple.min.js"></script>

or

Usage

Include jQuery, the ripple.css, and ripple.js into your page. Then upon initialization, you can activate ripple as follows:

$.ripple(".btn", {
	debug: false, // Turn Ripple.js logging on/off
	on: 'mousedown', // The event to trigger a ripple effect

	opacity: 0.4, // The opacity of the ripple
	color: "auto", // Set the background color. If set to "auto", it will use the text color
	multi: false, // Allow multiple ripples per element

	duration: 0.7, // The duration of the ripple

	// Filter function for modifying the speed of the ripple
	rate: function(pxPerSecond) {
        return pxPerSecond;
    },

	easing: 'linear' // The CSS3 easing function of the ripple
});

Elements can be overridden with their own default options:

<a href="#" data-duration="5" data-color="red" data-opacity="1">Slow Red Ripple</a>

Building

$ npm install
$ npm run-script build
$ npm run-script build-watch # To watch assets

Caveats

  • The element selected to contain a ripple will gain the following CSS properties:
    • position: relative
    • transform: translate3d(0,0,0)

License

MIT

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-37812.html

文章标题:Ripple.js

回到顶部