This is a translated page. The original can be found here: http://iwebdevel.com/2009/07/23/javascript-gifless-animation-animate-imageslogos-with-jquery/
UPDATES VIA RSS | Email Aktualizáciou cez RSS | E-mail Get updates via feedburner Get updates via twitter
Home / Coding / Design / JavaScript & Ajax / JavaScript: GIFless animatio… Home / Kódovanie / Design / JavaScript & AJAX / JavaScript: GIFless animatio ...

JavaScript: GIFless animation. JavaScript: GIFless animácie. Animate images,logos with jQuery Animovať obrázky, logá s jQuery

Posted on 23. Publikované dňa 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Júl, 2009 Dragos v Kódovanie, 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). Potom, čo hral nejaký čas s pozíciou relatívnej a absolútnej, som si všimol jeden veľký aspekt PNG formáte (pravdepodobne gif sú tiež dobré, ale pretože sa snažíme vytvoriť GIFless animácie, nebudem používať žiadne gif V tomto tutoriálu).

So here's aa PNG (transparent text), with the name of this website: Tak tu je aa PNG (transparentné text), sa názov tejto stránky:

Transparent Logo

Transparent Logo Transparent logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Trik, animácie obrázkov, bez nutnosti použitia obrázka vo formáte GIF vlastnosti, sú nasledujúce:

We have an image with transparent text written on it. Máme obrázok s priehľadným text písaný na ňu. 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živiť priehľadný text, musíme umiestniť obrázok na pozadí pod aktuálny obrázok a presunúť obrázok na pozadí, s cieľom vytvoriť tzv "animácie". 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). Ak chcete byť presnejší, obraz chceme byť animované by mal mať vyššiu z-index, ako pozadie pod ním (je to ako pracovať s vrstvami vo Photoshope). In order to animate the background image we need some javascript work to be done. S cieľom oživiť pozadia potrebujeme nejaký javascript práce je potrebné urobiť. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Samozrejme, ako veľký fanúšik jQuery, používal som jQuery urobiť všetko animácie veci.

Here's the script I've come up with: Tu je skript som prísť s: 

(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); (function ($) ($. fn.enliven = function (options) (var predvolené = (bgImage:'', trvanie: 3000), var options = $. predĺžení (predvolené nastavenia, options); var IMH = this.attr ( "height"), imW = this.attr ( "width"); this.wrap (''); this.css ( "pozíciu", "absolútnej"); $('#'+ 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; funkcie 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", vrchol: newTop + "px"), defaults.duration, "lineárne", function () (randimate (obj );));) návrat this.each (function () (randimate ($ (this ));)););)) (jQuery);

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Vyššie uvedený kód funguje ako plugin pre jQuery, takže by mali byť zahrnuté do stránky, po začlenení jQuery. In order to animate an image, you should use this code: S cieľom oživiť image, mali by ste použiť 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živiť ((bgImage: ". / Path_to_background_image.png", trvanie: 1000)); / / doba trvania je jeden animácie času na pozadie

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Tu je prí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 Tu je iný ako crazy-prí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 Ak sa vám páči myšlienka a chcete viac funkcií, napíšte mi na linku komentár a ja sa budem snažiť zlepšovať kód a pridať viac funkcií ;)

Translate this post Translate this post


Related posts: Súvisiace príspevky:

  1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Čo keď jQuery animácie nie je oheň / start?
  2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Ako sa dostať na indexe (pozíciu v rámci skupiny) z objektu s jQuery?
  3. Javascript: How to validate email address with JavaScript? Javascript: Ako overiť e-mailovú adresu JavaScript?
  4. JavaScript: Get anchor from URL JavaScript: Get kotva z URL
  5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Poslať funkcii ako parameter inej funkcie (volanie)

    blog comments powered by Disqus blog pripomienky powered by Disqus