Datang dari artikel milik google mengenai google material design, yang mana tertulis kata-kata "We challenged ourselves to create a visual language..." dan ternyata responpun berdatangan bak virus penyakit :D Para developer, coderer, scripter Setelah melihat karya para maestro kode, dapat kita lihat seksama apa yg menjadi pusat perhatian mereka :-?? Sebagian besar fokus terhadap trick/tutorial animation effect! CMIIW...;)) Berikut salah satu contoh animation click effect inspirasi dari google's material design.
Pokoknya efek blink-blink buricak burinong seperti itulah! Karena banyak master yg berkreasi mengenai hal ini, maka AA Koben pilihkan buat anda master Fians dari Indonesia?
Take a look: publicis-indonesia.github.io/Waves/Planning codewaves.css ) mau di hosting atau enggak, terserah kalian. Host JavaScript (waves.js ) biar cepat rendering.
Beberapa markup HTML waves:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'/>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<link rel="stylesheet" type="text/css" href=".../waves.css" />
<b:skin>
<![CDATA[
]]>
</b:skin>
</head>
<body>
<script type="text/javascript" src=".../waves.js"></script>
<script type="text/javascript">
var w = new Waves();
w.displayEffect();
</script>
</body>
</html> Beberapa markup HTML waves:
Flat buttons<a class="waves-effect waves-button">Button A</a>
<button class="waves-effect waves-button">Button B</button>
<input class="waves-effect waves-button" type="submit" value="Button C">
<input class="waves-effect waves-button" type="button" value="Button D">
DIVs<div class="waves-effect waves-block">Plain Box</div>
<div class="colored-box waves-effect waves-light waves-block">Colored Box</div>
<div class="raised-box waves-effect waves-float waves-block">Raised Box</div>
Images<span class="waves-effect">
<img src="LINK-IMAGE.jpg">
</span>
<span class="waves-effect waves-light waves-float">
<img src="LINK-IMAGE.jpg">
</span>
Loading... |
DO NOT EVEN TRY ADD LINK [-X
You can use some HTML tags, such as
<b> - <i> - <a> - http://...jpg/gif/png/bmp - http://youtu.be/...