Today, JavaScript animation is implemented on the Google homepage. Okay, I'm late...

Many people are interested in the dynamic logo on the Google homepage today. I have also implemented it, but I just found someone in the garden has already logged on first (please refer to here )...

After all, it is the result of my own work. I 'd like to let it go. In fact, the implementation of Hu yunrui and his colleagues is still somewhat opportunistic, he copies all the HTML generated after the animation is executed, hides all the HTML, and then displays them one by one...

My method is implemented by constantly inserting Div with background like Google. First, we create a div style information [left, top, width, height, array of background-position-X, background-position-y], and then use setTimeout to regularly Insert the DIV with these styles.

The results are as follows :(Click Run!)

Background images used in animation:

CodeIt is relatively simple:

 (  Function  (){
  VaR  Style_info  =  [
[ 307  ,  48  ,  88  ,  89  ,  0  ,  0  ],
[  307  ,  48  ,  89  , 89  ,  -  88  ,  0  ],
  //  N rows are omitted here...  
  ];
  VaR  Logo  =  Document. getelementbyid (  '  Hplogo '  );
(  Function  Logo_run (){
SetTimeout (  Function  (){
  VaR  A, div;
  If  (  =  Style_info.shift ()){
Div  =  Document. createelement (  '  Div '  );
Div.style.css text  =     '  Position: absolute;  '  +  
  '  Left:  '  +  A [  0  ]  + '  Px; top:  '  +  A [  1  ]  +  '  Px; width:  '  +  A [  2  ]  +  '  Px; height: '  +  A [  3  ]  +  '  Px;  '  +  
  '  Background: URL ("graham11-hp-sprite.png") No-repeat  '  +  A [  4  ] +  '  Px  '  +  A [  5  ]  +  '  Px;  '  ;
Logo. appendchild (DIV );
Logo_run ();
}
},  83  );
})();  
})();