Google Material Design believes you also know a lot, but at present both the application side or the Web side, can refer to the case is still few. In addition to "Material design some related Chinese materials/resource Collection Summary" for the purpose of the article, introduced a kind of Google Material design circular wave (ripple) Click Effect Plugin waves.
Google Material Design has a special effect, click on a color block area will have a circular wave (ripples) of the effects of the fade (of course, corresponding to the application side is a touch event). Waves is a JavaScript plugin that implements this effect on a Web page.
Waves Project AddressWaves How to useDemo Github
Browser compatibility: Chrome, Firefox, Opera and Safari with ie10+
Waves is very easy to use, after downloading the file, unzip the waves.min.css with Waves.min.js file referenced to your project, when activating the plugin can be used!
1234567891011121314151617 |
<! DOCTYPE html><Html><Head><title>waves Example</Title><LinkRel="Stylesheet"Type="Text/css"Href="/path/to/waves.min.css"/></Head><Body><AHref="#"Class="Waves-effect Waves-button" >click here</A><ScriptType="Text/javascript"src= "/path/to/ Waves.min.js "></script > <script type=</script> </body></HTML> |
Waves also provides less, SCSS, with SASS source code, convenient for you to use!
How to use:
Add the two classes to the div or class that you want to add the effect to waves-effect .waves-button .
12345 |
<buttonClass="Waves-effect Waves-button" >click here</Button><!--It also support A, input submit and Input button tag--<AHref="#"Class="Waves-effect Waves-button" >a Tag</A><input type =class= "Waves-effect Waves-button" value=<input type=class=value= |
It is important to note that if input you label, you need to manually add the i label package.
123456 |
<!--before displaying the effect-<InputClass="Waves-button-input"Type="Submit"Value="Button C" ><!--after displaying the effect--<Iclass= "Waves-effect Waves-button waves-input-wrapper "style= "WIDTH:85PX;HEIGHT:36PX;" > <input class= "Waves-button-input" type=value= </I> |
Waves also supports some webfont icon (for example, fontawesome), just need to add code like this:
1 |
<class="fa fa-gear waves-effect waves-circle" ></i> |
More ways to access the official website can be queried!
In addition: Tutsplus has an article detailing the way to achieve this effect, recreating the Touch Ripple Effect as Seen on Google Design, take a look: Click to view
http://devework.com/waves.html?replytocom=1630
Waves: Material Design circular Wave (ripple) Click Effect Plugin
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
