久しぶりにgoogleのタイトル画面に惹かれたので、再現してみた。

まずはこちらをご覧ください。

4月9日のgooogleロゴパクリ。


久しぶりにGoogleのトップロゴが面白いな…と思ったので、再現してみました。


再生ボタンとか配置している時間ももったいないので、「くりっくですたーと。」をクリックしていただければ…。


Googleさんのトップロゴは、毎回いろんな仕掛けがしてあって面白いんですけど、僕の場合はマニアックに「どうなってるんだろう？」って追求しちゃいます。

まあ、中身を見ても全くもってわからないので、じゃあ、自分ならどうやってそれを再現するか…ということにチャレンジしてみたりしてます。

Googleさん以外にも、面白い動きをしているサイトがあったりしたら、ソースを舐めまわすように眺めて、いろいろ弄ってみて…ということをやります。


僕は平凡な人間なので、世の中に出回っている「天才が書いたコード」をたくさん読むことで、少しでもスキルアップにつながればいいと思っているんですが…。

今回は全くコードが解析できなかったので我流で書きました。


jQueryを使ってると、わりと簡単に自分のやりたいことが出来るので助かります。
ほとんどJavaScriptを勉強していないけど、jQueryの使い方さえ分かれば、我流にしろGoogleさんのトップページが再現できちゃったりするので、jQuery使ってみましょう…というお誘いでした。


今回のJavaScriptコード。jQueryも読み込んでおいてください。

var Width = -67;

$(function(){
    
    //クリックでスタート
    $("p").click( function(){
        
        alert("スタートします");
    
        var imgWidth = Width * -12;//全12コマ
        var width = 0;
        var posX = 0;
        var Slide = 0;
	
        //だんだんスピードアップエフェクト
        setInterval(function(){
	    Slide += 1;
	    if ( Slide >= 67 ){ Slide = 67; }
	    changeImage2();
        }, 40);
        
        //水平移動エフェクト。
        function changeImage2(){
            if (posX >= imgWidth) posX= 0;
            posX += ( width + Slide );
            
            $('.slide2').css("background-position",-posX+"px 0px");
	}
	
   });
  //===============================================
 });

CSS

.slide2{
    width:467px;
    height:54px;
    background-position:0px;
    background-image: url(muybridge12-hp-f.jpg);
    float:left;
}

要するに、バックグラウンド画像を左にだんだん早くしながら水平移動して、最終的に1コマ（67px）ぶん移動させることで、パラパラマンガみたいになってるってわけです。


最近はDTPとLAMP開発にどっぷりで、クライアントサイドのスクリプトを書く機会が少なかったりするので、会社の休み時間を利用してリフレッシュのためにやることが多いです。

DTPで詰まったらサーバーサイドのプログラムとかシステム設計とかやって、それに飽きたらこういうのをやって気分転換…という感じでしょうか。

うーん…不健康すぎる(笑)。


ただ、こっちにハマっちゃうと仕事が手につかなくなるので程々に。
あくまでもリフレッシュのため…です。


需要があるかはさておき、ZIPにしてあるのでよかったらどぞ。