JavaScript: GIFless animation. JavaScript: GIFless animace. Animate images,logos with jQuery Animovat obrázky, loga s jQuery

Posted on 23. Publikováno dne 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Červenec, 2009 Dragos v Kódování, Design, JavaScript & Ajax

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). Poté, co hrál nějaký čas s postojem relativní a absolutní, jsem si všiml jeden velký aspekt PNG formátu (pravděpodobně gif jsou také dobré, ale protože se snažíme vytvořit GIFless animace, nebudu používat žádné gif V tomto tutoriálu).

So here's aa PNG (transparent text), with the name of this website: Tak tady je aa PNG (transparentní text), se název této stránky:

Transparent Logo Transparent logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Trik, animace obrázků, bez nutnosti použití obrázku ve formátu GIF vlastnosti, jsou následující:

We have an image with transparent text written on it. Máme obrázek s průhledným text psaný na ni. 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”. Oživit průhledný text, musíme umístit obrázek na pozadí pod aktuální obrázek a přesunout obrázek na pozadí, s cílem vytvořit tzv. "animace". 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). Chcete-li být přesnější, obraz chceme být animované by měl mít vyšší z-index, než pozadí pod ním (je to jako pracovat s vrstvami ve Photoshopu). In order to animate the background image we need some javascript work to be done. S cílem oživit pozadí potřebujeme nějaký javascript práce je třeba udělat. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Samozřejmě, jako velký fanoušek jQuery, používal jsem jQuery udělat vše animace věci.

Here's the script I've come up with: Zde je skript jsem přijít s:

 (function($){ (function ($) ( 
             $.fn.enliven = function(options) { $. fn.enliven = function (options) ( 
                 var defaults = { var výchozí = ( 
                     bgImage: '', bgImage:'', 
                     duration:3000 doba trvání: 3000 
                 }; ); 
                 var options = $.extend(defaults, options); var options = $. prodloužení (výchozí hodnoty, options); 
                 var imH=this.attr("height"), var imH = this.attr ( "height"), 
                 imW=this.attr("width"); imW = this.attr ( "width"); 
                 this.wrap(' this.wrap ( ' 

 '); '); 
                 this.css("position","absolute"); this.css ( "pozici", "absolutní"); 
                 $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'Cont'). append ( ' 

 '); '); 
                 var var 
                 maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. lbg '+ this.attr ( "className")). attr (' clientWidth ')-this.attr (' width ')) / 2, 
                 maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. lbg '+ this.attr ( "className")). attr (' clientHeight ')-this.attr (' height ')) / 2; 
                 function getrand() { getrand function () ( 
                     var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); 
                     return nr==0?-1:1; návrat nr == 0? -1:1; 
                 } ) 
                 function randimate(obj) { randimate function (obj) ( 
                     var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); 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(); 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(); newTop =$(". lbg "+ obj.attr (" className ")). attr (" offsetTop ") + Math.floor (Math.random () * ph) * getrand (); 
                     if(newLeft>0) newLeft=0; if (newLeft> 0) newLeft = 0; 
                     else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; else if (newLeft <-maxLeft) newLeft =- maxLeft +1; if (newTop> 0) newTop = 0; 
                     else if(newTop<-maxTop) else if (newTop <-maxTop) 
                         newTop=-maxTop+1; newTop =- maxTop +1; 
                     $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); $ ( '. lbg' + obj.attr ( "className")). animate ((left: newLeft + "px", vrchol: newTop + "px"), defaults.duration, "lineární", function () (randimate (obj );)); 
                 } ) 
                 return this.each(function(){ návrat this.each (function () ( 
                     randimate($(this)); randimate ($ (this)); 
                 }); )); 
             }; ); 
         })(jQuery); )) (jQuery); 

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Výše uvedený kód funguje jako plugin pro jQuery, takže by měly být zahrnuty do stránky, po začlenění jQuery. In order to animate an image, you should use this code: S cílem oživit image, měli byste použít tento kód:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). oživit ((bgImage: ". / path_to_background_image.png", doba trvání: 1000)); / / doba trvání je jeden animace času na pozadí 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Zde je příklad crazy 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 Tady je jiný než crazy-příklad 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 Pokud se vám líbí myšlenka a chcete více funkcí, napište mi na linku komentář a já se budu snažit vylepšovat kód a přidat více funkcí

Related posts: Související příspěvky:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Co když jQuery animace není oheň / start?
2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Jak se dostat na indexu (pozici v rámci skupiny) z objektu s jQuery?
3. JavaScript: Get anchor from URL JavaScript: Get kotva z URL
4. Javascript: How to validate email address with JavaScript? Javascript: Jak ověřit e-mailovou adresu JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Poslat funkci jako parametr jiné funkce (volání)