immaterial-design-ripple

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <base data-ice="baseUrl"> <title data-ice="title">API Document</title> <link type="text/css" rel="stylesheet" href="css/style.css"> <link type="text/css" rel="stylesheet" href="css/prettify-tomorrow.css"> <script src="script/prettify/prettify.js"></script> <script src="script/manual.js"></script> </head> <body class="layout-container" data-ice="rootContainer"> <header> <a href="./">Home</a> <a href="identifiers.html">Reference</a> <a href="source.html">Source</a> <a data-ice="repoURL" href="https://github.com/immaterial-design/immaterial-design-ripple" class="repo-url-github">Repository</a> <div class="search-box"> <span> <img src="./image/search.png"> <span class="search-input-edge"></span><input class="search-input"><span class="search-input-edge"></span> </span> <ul class="search-result"></ul> </div> </header> <nav class="navigation" data-ice="nav"><div> <ul> <li data-ice="doc"><span data-ice="kind" class="kind-class">C</span><span data-ice="name"><span><a href="class/src/index.js~ImdRipple.html">ImdRipple</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createContext2d">createContext2d</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-createRenderSchedule">createRenderSchedule</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getImageData">getImageData</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getPixelColor">getPixelColor</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-getTimingFunction">getTimingFunction</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-promiseEvent">promiseEvent</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-requestAnimationFrame">requestAnimationFrame</a></span></span></li> <li data-ice="doc"><span data-ice="kind" class="kind-function">F</span><span data-ice="name"><span><a href="function/index.html#static-function-transparentize">transparentize</a></span></span></li> </ul> </div> </nav> <div class="content" data-ice="content"><div data-ice="index" class="github-markdown"><h2 id="immaterial-design-ripple-beta-">Immaterial Design Ripple (beta)</h2> <p></p><p> <a href="https://npmjs.org/package/immaterial-design-ripple"> <img src="https://img.shields.io/npm/v/immaterial-design-ripple.svg?style=flat-square"> </a> <a href="https://travis-ci.org/immaterial-design/immaterial-design-ripple"> <img src="http://img.shields.io/travis/immaterial-design/immaterial-design-ripple.svg?style=flat-square"> </a> <a href="https://codeclimate.com/github/immaterial-design/immaterial-design-ripple/coverage"> <img src="https://img.shields.io/codeclimate/github/immaterial-design/immaterial-design-ripple.svg?style=flat-square"> </a> <a href="https://codeclimate.com/github/immaterial-design/immaterial-design-ripple"> <img src="https://img.shields.io/codeclimate/coverage/github/immaterial-design/immaterial-design-ripple.svg?style=flat-square"> </a> <a href="https://npmcdn.com/immaterial-design-ripple/esdoc/index.html"> <img src="https://npmcdn.com/immaterial-design-ripple/esdoc/badge.svg"> </a> </p> <p></p> <p></p><p> <a href="https://saucelabs.com/u/59798"> <img src="http://soysauce.berabou.me/u/59798/immaterial-design-ripple.svg"> </a> </p> <p></p> <blockquote> <p>HTML5 Canvas based pixelated ripple effect.</p> </blockquote> <p><a href="https://npmcdn.com/immaterial-design-ripple/release/index.html">See Example</a></p> <h2 id="installation">Installation</h2> <h2 id="at-nodejs">At NodeJS</h2> <pre><code class="lang-bash"><code class="source-code prettyprint">$ npm install immaterial-design-ripple --save</code> </code></pre> <pre><code class="lang-js"><code class="source-code prettyprint">import ImdRipple from 'immaterial-design-ripple'; ImdRipple.bindOnLoad('.imd-ripple');</code> </code></pre> <h2 id="at-cdn">At CDN</h2> <pre><code class="lang-html"><code class="source-code prettyprint"><script src="https://npmcdn.com/immaterial-design-ripple/release/immaterial-design-ripple.min.js"></script> <button class="imd-ripple">Default effect</button> <script>ImdRipple.bindOnLoad('.imd-ripple')</script></code> </code></pre> <h2 id="usage">Usage</h2> <h2 id="-imdripple-bindonload-selector-options-"><code>ImdRipple.bindOnLoad(selector, options = {})</code></h2> <p>Bind a left-click event automatically to the elements of the <code>selector</code> After window onload.</p> <p>If specify the <code>options</code> then set default of the ripple effect.</p> <pre><code class="lang-html"><code class="source-code prettyprint"><script> ImdRipple.bindOnLoad('body', { pixelSize: 1, bitCrash: 10, color: 'black', timingFunction: 'easeInCirc', }) </script></code> </code></pre> <p>Becomes :+1:</p> <p><img src="https://cloud.githubusercontent.com/assets/1548478/13376399/8a6f610e-ddfe-11e5-9f39-364c869ed841.gif" alt="result"></p> <h2 id="document">Document</h2> <p><a href="https://npmcdn.com/immaterial-design-ripple/esdoc/index.html">API Reference(日本語)</a></p> <h2 id="test">Test</h2> <pre><code class="lang-bash"><code class="source-code prettyprint">git clone https://github.com/59naga/immaterial-design-ripple.git cd immaterial-design-ripple npm install npm test</code> </code></pre> <h2 id="license">License</h2> <p><a href="http://59naga.mit-license.org/">MIT</a></p> </div> </div> <footer class="footer"> Generated by <a href="https://esdoc.org">ESDoc<span data-ice="esdocVersion">(0.4.7)</span></a> </footer> <script src="script/search_index.js"></script> <script src="script/search.js"></script> <script src="script/pretty-print.js"></script> <script src="script/inherited-summary.js"></script> <script src="script/test-summary.js"></script> <script src="script/inner-link.js"></script> <script src="script/patch-for-local.js"></script> </body> </html>