Trik Komputer: Add Animation Click Effect use Waves

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 ~~whatever the name~~ berlomba menunjukan kabisanya masing-masing! Berikut beberapa contoh hasil karya orang-orang hebat yg terhosting on web codepen codepen.io/search?q=Google+Material+Design.
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.

Touch ripple - Close

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 code

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
 <html>
  <head>
   <meta charset='utf-8'/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
    <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>

Masukan kode CSS (waves.css) mau di hosting atau enggak, terserah kalian. Host JavaScript (waves.js) biar cepat rendering.
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>

Si yu :-h

Trik Komputer

Kamis, 24 Juli 2014

Add Animation Click Effect use Waves

Tidak ada komentar:

Posting Komentar