JavaScript: GIFless animation. JavaScript: animaţie GIFless. Animate images,logos with jQuery Animate imagini, logo-urile cu jQuery
Posted on 23. Postat la data de 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Iulie, 2009 de către Dragos în codificare a mărfurilor, 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). După ce a jucat ceva timp cu poziţia relativă şi absolută, am observat o un aspect de mare format de imagine PNG (imagini, probabil, gif sunt, de asemenea, bune, dar din moment ce suntem încercarea de a crea o animaţie GIFless, nu voi folosi orice gif in acest tutorial).
So here's aa PNG (transparent text), with the name of this website: Deci, aici e PNG AA (text transparent), cu numele acestui site:
Transparent Logo Transparent Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Şmecherie de animare imagini, fără a fi nevoie de a utiliza caracteristicile imagini in format GIF, sunt după cum urmează:
We have an image with transparent text written on it. Avem o imagine cu text transparentă scris pe ea. 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”. Pentru a anima textul transparente, avem nevoie de a plasa o imagine de fundal de mai jos imaginea reală şi pentru a trece această imagine de fundal, în scopul de a crea un aşa-numitele "animaţie". 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). Pentru a fi mai precis, imaginea vrem să fie animat ar trebui să aibă o mai mare z-index decât imaginea de fundal este de mai jos (e ca si cum lucrează cu straturi în Photoshop). In order to animate the background image we need some javascript work to be done. În scopul de a anima imaginea de fundal avem nevoie de ceva muncă JavaScript care urmează să fie făcut. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Desigur, ca un mare fan al jQuery, l-am folosit jQuery de a face toate lucrurile de animaţie.
Here's the script I've come up with: Aici 'script-ul le-am venit cu:
(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); implicite (funcţie ($) ($. fn.enliven = function (opţiuni) (var = (bgImage:'', durata: 3000); opţiuni de var = $. extinde (defaults, opţiuni); Imh var = this.attr ( "înălţime"), IMW = this.attr ( "width"); this.wrap ( ''); this.css ( "poziţie", "absolut"); $('#'+ this.attr ( "className", ) + 'Cont'). append ( ''); maxLeft var =($('. LBG '+ this.attr ( "className")). attr clientWidth (' ')-this.attr (' width ')) / 2, maxTop =($('. LBG '+ this.attr ( "className")). attr clientHeight (' ')-this.attr ( "înălţime")) / 2; getrand function () (var nr = Math.floor (Math.random () * 2); nr reveni == 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-ului) * getrand (); în cazul în care (newLeft> 0) newLeft = 0; else if (newLeft <-maxLeft) newLeft =- maxLeft +1; în cazul în care (newTop> 0) newTop = 0; else if (newTop <-maxTop) newTop =- maxTop 1; $ ( '. LBG " + obj.attr ( "className")). animate ((stânga: newLeft + "px", top: newTop + "px"), defaults.duration, "liniar", function () (randimate (obj);));) this.each return (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. Codul de mai sus funcţionează ca un plug-in de jQuery, aşa că ar trebui să fie incluse în pagină, după includerea jQuery. In order to animate an image, you should use this code: În scopul de a anima o imagine, trebuie să utilizaţi acest cod:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ image_selector ( ''). însufleţi ((bgImage: ". / path_to_background_image.png", durata: 1000)); / / Durata este de timp de o animatie timp de fond Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Iată un exemplu nebun 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 Iată un alt exemplu non-nebun 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 Dacă vă place ideea şi doriţi mai multe caracteristici, drop-mi-o linie într-un comentariu şi voi încerca să îmbunătăţească şi să adăugaţi codul de mai multe caracteristici 
Related posts: Legate de posturi:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Ce se întâmplă dacă animaţie jQuery nu de incendiu / începe?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Cum se ajunge indicele (poziţia în cadrul unui grup), de un obiect cu jQuery?
- Javascript: How to validate email address with JavaScript? Javascript: Cum, pentru a valida adresa de e-mail cu JavaScript?
- JavaScript: Get anchor from URL JavaScript: Ia ancora de la URL-ul
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Trimite funcţioneze ca un parametru de la o altă funcţie (Callbacks)
