-
Notifications
You must be signed in to change notification settings - Fork 2
/
index.html
94 lines (69 loc) · 6.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta http-equiv="X-UA-Compatible" content="chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='https://fonts.googleapis.com/css?family=Architects+Daughter' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="stylesheets/stylesheet.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/pygment_trac.css" media="screen">
<link rel="stylesheet" type="text/css" href="stylesheets/print.css" media="print">
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<title>Inkdrops by akhilarjun</title>
</head>
<body>
<header>
<div class="inner">
<h1>Inkdrops</h1>
<h2>The Ink-Drop style interaction that is added in the material design by Google using jQuery and CSS.</h2>
<a href="https://github.com/akhilarjun/InkDrops" class="button"><small>View project on</small> GitHub</a>
</div>
</header>
<div id="content-wrapper">
<div class="inner clearfix">
<section id="main-content">
<h1>
<a id="inkdrops" class="anchor" href="#inkdrops" aria-hidden="true"><span class="octicon octicon-link"></span></a>InkDrops</h1>
<p>The Ink-Drop style interaction that is added in the material design by Google using jQuery and CSS.</p>
<p>The new Design concept MaterialJs launched with the new Google Android 5.0 had a beautiful Ink Drop fading animation for every click. And the same was implemented in the Polymer project as well. So this is just a small breakdown for the same using jQuery and CSS.</p>
<h3>
<a id="demo-here" class="anchor" href="#demo-here" aria-hidden="true"><span class="octicon octicon-link"></span></a><a href="http://akhilarjun.github.io/InkDrops/demo.html">Demo Here</a>
</h3>
<h2>
<a id="how-to-" class="anchor" href="#how-to-" aria-hidden="true"><span class="octicon octicon-link"></span></a>How To :</h2>
<p>First include the <em>inkdrop.css</em> ,<em>ink.js file</em> and <em>jQuery</em> to your page</p>
<div class="highlight highlight-html"><pre><<span class="pl-ent">link</span> <span class="pl-e">rel</span>=<span class="pl-s1"><span class="pl-pds">'</span>stylesheet<span class="pl-pds">'</span></span> <span class="pl-e">type</span>=<span class="pl-s1"><span class="pl-pds">'</span>text/css<span class="pl-pds">'</span></span> <span class="pl-e">href</span>=<span class="pl-s1"><span class="pl-pds">'</span>css/inkdrops.css<span class="pl-pds">'</span></span>></<span class="pl-ent">link</span>>
<<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s1"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s1"><span class="pl-pds">'</span>js/ink.js<span class="pl-pds">'</span></span>></<span class="pl-ent">script</span>>
<<span class="pl-ent">script</span> <span class="pl-e">type</span>=<span class="pl-s1"><span class="pl-pds">"</span>text/javascript<span class="pl-pds">"</span></span> <span class="pl-e">src</span>=<span class="pl-s1"><span class="pl-pds">'</span>js/jquery.min.js<span class="pl-pds">'</span></span>></<span class="pl-ent">script</span>></pre></div>
<p>Then all you have to do is add a class '<em>inkMe</em>' to the containing element that needs the ink drop effect. And Voila! when you click the element you could see the ink drop dripping<br></p>
<div class="highlight highlight-html"><pre><<span class="pl-ent">a</span> <span class="pl-e">class</span>=<span class="pl-s1"><span class="pl-pds">'</span>inkMe<span class="pl-pds">'</span></span>>Regular Link</<span class="pl-ent">a</span>></pre></div>
<h2>
<a id="customize" class="anchor" href="#customize" aria-hidden="true"><span class="octicon octicon-link"></span></a>Customize</h2>
<p>You can also change the color of the ink ripple by assigning the <em>ink-color</em> attribute any custom class that has the backround-color set. This also works with bootstrap classes like primary, danger, etc.</p>
<div class="highlight highlight-html"><pre><<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s1"><span class="pl-pds">'</span>inkMe<span class="pl-pds">'</span></span> <span class="pl-e">ink-color</span>=<span class="pl-s1"><span class="pl-pds">'</span>bgBlue<span class="pl-pds">'</span></span>>Blue Ripple on Button</<span class="pl-ent">button</span>></pre></div>
<p>Where <em>bgBlue</em> is</p>
<div class="highlight highlight-css"><pre><span class="pl-e">.bgBlue</span>{
<span class="pl-mp"><span class="pl-s3">background</span></span>: <span class="pl-c1">#39c</span>;
}</pre></div>
<p>Also you can add multiple ink-drops overlapping one another by using the <em>multiple-ink</em> attribute</p>
<div class="highlight highlight-html"><pre><<span class="pl-ent">button</span> <span class="pl-e">class</span>=<span class="pl-s1"><span class="pl-pds">'</span>inkMe<span class="pl-pds">'</span></span> <span class="pl-e">ink-color</span>=<span class="pl-s1"><span class="pl-pds">'</span>bgYellow<span class="pl-pds">'</span></span> <span class="pl-e">multiple-ink</span>=<span class="pl-s1">true</span>>Button with Multiple Ripples</<span class="pl-ent">button</span>></pre></div>
<p><em>Does not work with IE8 and below versions <img class="emoji" title=":smirk:" alt=":smirk:" src="https://assets-cdn.github.com/images/icons/emoji/unicode/1f60f.png" height="20" width="20" align="absmiddle"></em></p>
</section>
<aside id="sidebar">
<a href="https://github.com/akhilarjun/InkDrops/zipball/master" class="button">
<small>Download</small>
.zip file
</a>
<a href="https://github.com/akhilarjun/InkDrops/tarball/master" class="button">
<small>Download</small>
.tar.gz file
</a>
<p class="repo-owner"><a href="https://github.com/akhilarjun/InkDrops"></a> is maintained by <a href="https://github.com/akhilarjun">akhilarjun</a>.</p>
<p>This page was generated by <a href="https://pages.github.com">GitHub Pages</a> using the Architect theme by <a href="https://twitter.com/jasonlong">Jason Long</a>.</p>
</aside>
</div>
</div>
</body>
</html>