JavaScript: GIFless animation. JavaScriptを：GIFlessアニメーション。 Animate images,logos with jQuery アニメーション化、画像、jQueryを使ってのロゴ

Posted on 23. 23日に掲載した。 Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax 7月、2009 符号化 、 デザイン 、JavaScriptの＆アヤックスのドラゴシュで

After playing some time with position relative and absolute, I've noticed one a great aspect of the png image format (probably gif images are also good, but since we are trying to create a GIFless animation, I won't use any gif images in this tutorial).以来、私たちはGIFlessアニメーションを作成するには、私は、gif画像を使用しないとしている位置と時間を相対的と絶対的な演奏の後、私は（おそらく、gif画像も良いですが、png画像フォーマットの大きなメリット1気づいたこのチュートリアルで）。

So here's aa PNG (transparent text), with the name of this website:このサイトの名前をだからここの単PNG形式（透過テキスト）、：

Transparent Logo透明なロゴ

The trick of animating images, without the need of using the GIF image format features, are as follow: GIF画像フォーマット機能を使用する必要がなく画像のアニメーション化のトリックを、アールは以下の通り：

We have an image with transparent text written on it.我々は、透明テキストが書かれたイメージがある。 To animate the transparent text, we need to place a background image below the actual image and move this background image, in order to create a so called “animation”.透明なテキストをアニメーション化するために、我々は、実際の画像の下に背景画像を配置してこのような背景画像を移動するため、いわゆる"アニメーションを作成する"必要があります。 To be more precise, the image we want to be animated should have a higher z-index than the background image below it (it's like working with layers in Photoshop).さらに、我々は以下の背景画像よりも高いz -インデックスを持つ必要がアニメーションにしたい（画像は、Photoshopのレイヤーでの作業のような）の正確なことします。 In order to animate the background image we need some javascript work to be done.順序では、実行されるいくつかのJavaScriptの動作に必要な背景イメージをアニメーション化する。 Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff.もちろん、jQueryの大ファンとして、私はjQueryのすべてのアニメーションのものを行うために使用しました。

Here's the script I've come up with:ここで私を作ってみたスクリプトは：

(function($){ $.fn.enliven = function(options) { var defaults = { bgImage: '', duration:3000 }; var options = $.extend(defaults, options); var imH=this.attr("height"), imW=this.attr("width"); this.wrap(' '); this.css("position","absolute"); $('#'+this.attr("className")+'Cont').append(' '); var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; function getrand() { var nr=Math.floor(Math.random()*2); return nr==0?-1:1; } function randimate(obj) { var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); newLeft=$(".lbg"+obj.attr("className")).attr("offsetLeft")+Math.floor(Math.random()*pw)*getrand(); newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); if(newLeft>0) newLeft=0; else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; else if(newTop<-maxTop) newTop=-maxTop+1; $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); } return this.each(function(){ randimate($(this)); }); }; })(jQuery); （関数（$）（$。fn.enliven =機能（オプション）（ヴァールデフォルト=（bgImage：''、期間：3000）;ヴァールオプション= $。= this.attr（デフォルトでは、オプション）;ヴァールimH拡張（ "高"）、imW = this.attr（"幅"）; this.wrap（''）; this.css（"位置"、""）の絶対; $('#'+（"classname"とthis.attr ）+'続き'）（''）;ヴァールmaxLeft =($('. lbg'+（"クラス名"））this.attrを追加。Attrを（'clientWidth'）- this.attr（'幅'）） / 2、maxTop =($('. lbg'+（"クラス名"））this.attr。Attrを（'clientHeightを'）- this.attr（'高さ'））/ 2;関数getrand（）（ヴァール番号nr = Math.floor（Math.random（）* 2）;返す番号nr == 0？-1:1;））（ヴァールのpH randimate（OBJファンクション= Math.floor（imH * 20/100）、週= Math.floor （imW * 20/100）; newLeft =$(". lbg"+（"クラス名"））obj.attr。Attrを（"offsetLeft"）+ Math.floor（Math.random（）*週）* getrand（） ; newTop =$(". lbg"+（"クラス名"））obj.attr。Attrを（"offsetTop"）+ Math.floor（Math.random（）*のpH）* getrand（）;場合（newLeft"0） newLeft = 0;他の場合（newLeft"- maxLeft）newLeft =- maxLeft +1;場合（newTop"0）= 0 newTop;他の場合（newTop"- maxTop）newTop =- maxTop 1; $（'。lbg' +（"クラス名"））obj.attr。アニメーション（（左：newLeft +"ピクセル"、トップ：newTop +"ピクセル"）、defaults.duration"、"線形、関数（）（（OBJの）randimate;））;）戻りthis.each（関数（）（（$ randimate（これは））;））;）））（jQueryの）; 

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. jQueryの封入後、jQueryのプラグインとして動作する、上記のコードなので、このページに含まれる必要があります。 In order to animate an image, you should use this code:ために、このコードを使用してください：イメージをアニメーション化する

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $（'image_selector'）。活性化させる（（bgImage："。/ path_to_background_image.png"、期間：1000））; / /時間1時間を背景に、アニメーションの時間です 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.phpここでは狂気の例1の：http://iwebdevel.com/wp-content/uploads/2009/07/logo.php
Here's another non-crazy example 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.phpここ以外の別の狂気の例2：http://iwebdevel.com/wp-content/uploads/2009/07/logo2.phpの

If you like the idea and want more features, drop me a line in a comment and I'll try to improve the code and add more featuresあなたのアイデアのようにし、もし、私のコメントでラインドロップの詳細な機能を使いたいと私は、コードを改善し、さらに機能を追加してみます

Related posts:関連記事：

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScriptを：どのような場合はjQueryのアニメーションは火災/起動するのですか？
2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScriptを：どのようにjQueryを使ってオブジェクトの（位置は 、 グループ内）のインデックスを取得する？
3. JavaScript: Get anchor from URL JavaScriptを：URLからアンカーを取得
4. Javascript: How to validate email address with JavaScript? Javascriptを：どのようにJavaScriptを使って電子メールアドレスを検証する？
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScriptを：別の関数（コールバック）へのパラメータとして関数を送る