Click Here Trigger


HTML5 CSS3 กับตัวอย่าง Google Driod เต้น กังนัม สไตล์ (Gangnam Style)

December 25, 2012   Developer, Google Developers, HTML5, jQuery, Programming Language   1 Comment
VN:F [1.9.22_1171]
Rating: 0 (from 0 votes)
VN:F [1.9.22_1171]
Rating: 0.0/10 (0 votes cast)

ไลบราลี่ HTML5 และ CSS3 กับการสร้าง Animation แบบ Pure CSS ให้เจ้า Google Android หุ่นกระป๋องเขียวออกมาเต้นกังนัมสไตล์ (Gangnam Style) โชว์ครับซึ่งชุดไลบราลี่ (Library) ตัวนี้ทางได้ออกมาจาก แคมเปญของ http://www.google.com/zeitgeist ”จิตวิญญาณของปี 2012 บน Google “ ซึ่งทาง Google เองก็ได้ศึกษาผลรวมของการค้นหาผ่านเครื่องมือค้นหา Google นั่นแหละด้วย Keyword หรือคำค้นหา มากกว่าล้านล้านคำ

มีคลิป วีดีโอให้ดู

ซึ่งในปีนี้ กระแสความฮอตที่ทาง Google ได้พบก็คือ กังนัมสไตล์ท่าเต้นยอดฮิต มาแรงซึ่งเป็น ข้อความค้นหาที่ “มาแรง” นั่นคือคำค้นหา หรือ Keyword ที่มีผู้ค้นมากที่สุดในช่วงเวลาหนึ่งของปี 2012 เมื่อเปรียบเทียบกับปี 2011 จากทั่วโลกครับ และแน่นอน วีดีโอยอดฮิตที่ Google ตกใจก็คือท่าเต้นนี้

ไม่รอช้า ก็ได้มีการทำ HTML5 และ CSS (CSS3) ออกมาให้เป็นเจ้าหุ่นกระป๋อง Android ของ Google ออกมาโยกย้ายเต้นท่าเต้นจากเพลง กังนัมสไตล์ (Gangnam Style) ให้เราได้ขำกันครับ

ก่อนอื่นให้ ลองสร้าง HTML ไฟล์ขึ้นมาครับ

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
</head>
   <body>
   </body>
</html>

ในที่นี่ต้องใช้ CSS ไฟล์หนึ่ง คุมสไตล์หลักไว้ก่อนครับ และ Mootools 1.4.5  ในการควบคุมแอนิเมชัน

ซึ่งจำเป็นต้องใช้ 2 ไฟล์นี้

นำไปแทรกไว้ที่ HEAD ของ HTML ดังนี้

  <script type='text/javascript' 
   src='mootools-core-1.4.5-nocompat.js'></script>
  <link rel="stylesheet" type="text/css" href="normalize.css">
  <link rel="stylesheet" type="text/css" href="result-light.css">

จากนั้น ให้มาดูชุดกราฟิก ที่ผมไปหามาจาก เว็บนักพัฒนา เจ้าของ code เดิม http://www.google.com/zeitgeist นั่นเองเค้าจะมีการหั่น อวัยวะของหุ่น Android ตัวนี้ไว้แล้วครับ

ให้เพิ่ม Code HTML ส่วนนี้ลงไปใน BODY

<div id="maia-signature">
      <div class="zg-sig">
        <div class="zg-psydroid">
          <img alt="" class="zg-psydroid-head" src="psydroid-head.png"> 
          <img alt="" class="zg-psydroid-body" src="psydroid-body.png"> 
          <img alt="" class="zg-psydroid-arm-l" src="psydroid-arm-l.png"> 
          <img alt="" class="zg-psydroid-arm-r" src="psydroid-arm-r.png"> 
          <img alt="" class="zg-psydroid-leg-l" src="psydroid-leg-l.png"> 
          <img alt="" class="zg-psydroid-leg-r" src="psydroid-leg-r.png">
        </div>
  </div>
</div>
ไฟล์ภาพของ Android

ไฟล์ภาพของ Android

ที่หน้าของตัว HTML นั้นต้องมีการฝัง CSS เพิ่มเติมเข้าไป ซึ่งเป็น CSS Library ของ Webkit ที่ยาวมโหฬาร พอตัวครับ

<style type='text/css'>
    h1 { 
 font-size: 1.2em;    
}
body {
 font-family: "Helvetica Neue", "Arial", sans-serif ;    
 padding: 20px;        
}
span {
 color: #AAA;  
 font-size: 12px;display:block;   
}
a.view-the-source-luke,a.discussion {
  position: absolute; 
  right: 80px; 
  top: 30px;    
  font-size: 15px;
}
a.discussion {
    top: 50px;
}
html {padding: 20px 0; background-color: #efefef;}
body {width: 500px; padding: 40px; margin: 0 auto; 
background: #fff; box-shadow: 1px 1px 5px rgba(0,0,0,0.5);}
a { color: #3779FF; }
#maia-signature {
position:relative;
 
clear: both;
margin: 120px auto 0;
 
    width: 200px;
    height: 44px;
    top: 30px;
    cursor: pointer;
}
 
.zg-sig {
height:50px;
overflow:hidden;
position:absolute;
right:0;
top:0;
-moz-transition:all .5s ease-in;
-o-transition:all .5s ease-in;
-webkit-transition:all .5s ease-in;
transition:all .5s ease-in;
width:138px;
z-index:50;
padding:0;
}
 
.zg-sig:hover {
height:160px;
top:-160px;
-moz-transition:all .33s ease-in;
-o-transition:all .33s ease-in;
-webkit-transition:all .33s ease-in;
transition:all .33s ease-in;
}
 
.zg-psydroid,.zg-psydroid img {
-moz-animation-delay:1s;
-moz-animation-duration:2.5s;
-moz-animation-iteration-count:infinite;
-webkit-animation-delay:1s;
-webkit-animation-duration:2.5s;
-webkit-animation-iteration-count:infinite;
animation-delay:1s;
animation-duration:2.5s;
animation-iteration-count:infinite;
}
 
.zg-psydroid {
position:relative;
top:0;
}
 
.zg-sig:hover .zg-psydroid {
-moz-animation-name:psydroid-dance;
-webkit-animation-name:psydroid-dance;
animation-name:psydroid-dance;
}
 
.zg-psydroid img {
position:absolute;
-moz-transform-origin:50% 0;
-ms-transform-origin:50% 0;
-o-transform-origin:50% 0;
-webkit-transform-origin:50% 0;
transform-origin:50% 0;
}
 
.zg-psydroid .zg-psydroid-head {
left:27px;
top:6px;
z-index:100;
}
 
.zg-psydroid .zg-psydroid-body {
left:27px;
top:55px;
z-index:100;
}
 
.zg-psydroid .zg-psydroid-arm-l {
left:6px;
top:55px;
z-index:120;
}
 
.zg-sig:hover .zg-psydroid-arm-l {
-moz-animation-name:psydroid-arm-l;
-webkit-animation-name:psydroid-arm-l;
animation-name:psydroid-arm-l;
}
 
.zg-psydroid .zg-psydroid-arm-r {
right:7px;
top:55px;
z-index:120;
}
 
.zg-sig:hover .zg-psydroid-arm-r {
-moz-animation-name:psydroid-arm-r;
-webkit-animation-name:psydroid-arm-r;
animation-name:psydroid-arm-r;
}
 
.zg-psydroid .zg-psydroid-leg-l {
left:43px;
top:116px;
z-index:80;
}
 
.zg-sig:hover .zg-psydroid-leg-l {
-moz-animation-name:psydroid-leg-l;
-webkit-animation-name:psydroid-leg-l;
animation-name:psydroid-leg-l;
}
 
.zg-psydroid .zg-psydroid-leg-r {
right:44px;
top:116px;
z-index:80;
}
 
.zg-sig:hover .zg-psydroid-leg-r {
-moz-animation-name:psydroid-leg-r;
-webkit-animation-name:psydroid-leg-r;
animation-name:psydroid-leg-r;
}
 
20%,50%,80% {
top:4px;
}
 
30%,60%,90%,100% {
top:0;
}
@-moz-keyframes psydroid-dance {
  0% { top: 0; }
  20% { top: 4px; }
  30% { top: 0; }
  50% { top: 4px; }
  60% { top: 0; }
  80% { top: 4px; }
  90% { top: 0; }
  100% { top: 0; }
}
@-moz-keyframes psydroid-leg-l {
  0% { top: 116px; }
  10% { top: 116px; }
  15% { top: 116px; }
  25% { top: 116px; }
  30% { top: 110px; }
  40% { top: 116px; }
  45% { top: 120px; }
  55% { top: 116px; }
  60% { top: 120px; }
  70% { top: 116px; }
  75% { top: 110px; }
  85% { top: 116px; }
  100% { top: 116px; }
}
@-moz-keyframes psydroid-leg-r {
  0% { top: 116px; }
  10% { top: 120px; }
  15% { top: 110px; }
  25% { top: 116px; }
  30% { top: 120px; }
  40% { top: 116px; }
  45% { top: 110px; }
  55% { top: 116px; }
  60% { top: 110px; }
  70% { top: 116px; }
  75% { top: 120px; }
  85% { top: 116px; }
  100% { top: 116px; }
}
@-moz-keyframes psydroid-arm-l {
  0% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  10% { -moz-transform: rotate(-60deg); 
-webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
  20% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-65deg); transform: rotate(-65deg); }
  25% { -moz-transform: rotate(-55deg); 
-webkit-transform: rotate(-55deg); transform: rotate(-55deg); }
  40% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-75deg); transform: rotate(-75deg); }
  50% { -moz-transform: rotate(-60deg); 
-webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
  55% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-80deg); transform: rotate(-80deg); }
  65% { -moz-transform: rotate(-55deg); 
-webkit-transform: rotate(-55deg); transform: rotate(-55deg); }
  80% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-65deg); transform: rotate(-65deg); }
  90% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-moz-keyframes psydroid-arm-r {
  0% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  10% { -moz-transform: rotate(60deg); 
-webkit-transform: rotate(60deg); transform: rotate(60deg); }
  20% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(65deg); transform: rotate(65deg); }
  25% { -moz-transform: rotate(55deg); 
-webkit-transform: rotate(55deg); transform: rotate(55deg); }
  40% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(75deg); transform: rotate(75deg); }
  50% { -moz-transform: rotate(60deg); 
-webkit-transform: rotate(60deg); transform: rotate(60deg); }
  55% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(80deg); transform: rotate(80deg); }
  65% { -moz-transform: rotate(55deg); 
-webkit-transform: rotate(55deg); transform: rotate(55deg); }
  80% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(65deg); transform: rotate(65deg); }
  90% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
 
@-webkit-keyframes psydroid-dance {
  0% { top: 0; }
  20% { top: 4px; }
  30% { top: 0; }
  50% { top: 4px; }
  60% { top: 0; }
  80% { top: 4px; }
  90% { top: 0; }
  100% { top: 0; }
}
@-webkit-keyframes psydroid-leg-l {
  0% { top: 116px; }
  10% { top: 116px; }
  15% { top: 116px; }
  25% { top: 116px; }
  30% { top: 110px; }
  40% { top: 116px; }
  45% { top: 120px; }
  55% { top: 116px; }
  60% { top: 120px; }
  70% { top: 116px; }
  75% { top: 110px; }
  85% { top: 116px; }
  100% { top: 116px; }
}
@-webkit-keyframes psydroid-leg-r {
  0% { top: 116px; }
  10% { top: 120px; }
  15% { top: 110px; }
  25% { top: 116px; }
  30% { top: 120px; }
  40% { top: 116px; }
  45% { top: 110px; }
  55% { top: 116px; }
  60% { top: 110px; }
  70% { top: 116px; }
  75% { top: 120px; }
  85% { top: 116px; }
  100% { top: 116px; }
}
@-webkit-keyframes psydroid-arm-l {
  0% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  10% { -moz-transform: rotate(-60deg); 
-webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
  20% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-65deg); transform: rotate(-65deg); }
  25% { -moz-transform: rotate(-55deg); 
-webkit-transform: rotate(-55deg); transform: rotate(-55deg); }
  40% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-75deg); transform: rotate(-75deg); }
  50% { -moz-transform: rotate(-60deg); 
-webkit-transform: rotate(-60deg); transform: rotate(-60deg); }
  55% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-80deg); transform: rotate(-80deg); }
  65% { -moz-transform: rotate(-55deg); 
-webkit-transform: rotate(-55deg); transform: rotate(-55deg); }
  80% { -moz-transform: rotate(-65deg); 
-webkit-transform: rotate(-65deg); transform: rotate(-65deg); }
  90% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
@-webkit-keyframes psydroid-arm-r {
  0% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  10% { -moz-transform: rotate(60deg); 
-webkit-transform: rotate(60deg); transform: rotate(60deg); }
  20% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(65deg); transform: rotate(65deg); }
  25% { -moz-transform: rotate(55deg); 
-webkit-transform: rotate(55deg); transform: rotate(55deg); }
  40% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(75deg); transform: rotate(75deg); }
  50% { -moz-transform: rotate(60deg); 
-webkit-transform: rotate(60deg); transform: rotate(60deg); }
  55% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(80deg); transform: rotate(80deg); }
  65% { -moz-transform: rotate(55deg); 
-webkit-transform: rotate(55deg); transform: rotate(55deg); }
  80% { -moz-transform: rotate(65deg); 
-webkit-transform: rotate(65deg); transform: rotate(65deg); }
  90% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
  100% { -moz-transform: rotate(0deg); 
-webkit-transform: rotate(0deg); transform: rotate(0deg); }
}
  </style>

ตามด้วย Script Javascript เล็กน้อยในการควบคุม

<script type='text/javascript'>//<![CDATA[ 
window.addEvent('load', function() {
});//]]>  
</script>

ลองรันดูครับ ตอนแรกจะได้หน้าจอของเว็บเป็นแบบนี้ ให้ลองเอา Mouse ไป Roll Over ดูที่หัวของ Android

เอา Mouse ลงไปแตะที่หัว

เอา Mouse ลงไปแตะที่หัว

สักพัก หุ่น Android ก็จะลุกขึ้นมาเต้น ควบม้า กังนัม สไตล์ อย่างได้ใจ

เต้นไป อย่างได้ใจ กังนัมสไตล์

เต้นไป อย่างได้ใจ กังนัมสไตล์

สามารถดู DEMO ได้ที่นี่ครับ

http://www.daydev.com/demo/gangnumdroid/

หรือดาวน์โหลด Source Code จากบทความนี้ได้ที่นี่ครับ

Android Google Gangnum Style HTML5 (Version 1.0)

Contributors: Banyapon Poolsawasd


Social Media Marketing และที่ปรึกษาด้านการตลาดออนไลน์ มีงานวิจัยด้านนวัตกรรมออนไลน์ และโครงงานด้านเทคโนโลยี Social Integration และ Augmented Reality ร่วมทั้งในประเทศ และต่างประเทศ รวมถึงตำแหน่งอาจารย์พิเศษ ประจำมหาวิทยาลัยชั้นนำ และวิทยากรพิเศษ นักวิจัย นักคิด


บทความนี้ใช้ Skills ด้าน เทคนิค อะไรของคุณบ้าง

, , , , , ,

Comments

Plugin from the creators of Brindes :: More at Plulz Wordpress Plugins
Press Esc to close