JavaScript: GIFless animation. JavaScript: animació GIFless. Animate images,logos with jQuery Imatges animades, logos amb jQuery

Posted on 23. Publicat a 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Juliol de 2009, per Dragos a la codificació, Disseny, JavaScript i 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). Després de jugar una estona amb la posició relativa i absoluta, he notat un aspecte de gran format d'imatge PNG (imatges en format GIF probablement també són bones, però des que estem tractant de crear una animació GIFless, no vaig a utilitzar qualsevol imatge gif en aquest tutorial).

So here's aa PNG (transparent text), with the name of this website: Així que aquí està PNG AA (text transparent), amb el nom d'aquest lloc:

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: El truc d'animació d'imatges, sense necessitat d'utilitzar les característiques de format d'imatge GIF, són els següents:

We have an image with transparent text written on it. Tenim una imatge amb text transparent escrit en ella. 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”. Per animar el text transparent, hem de posar una imatge de fons per sota de la imatge real i moure la imatge de fons, per tal de crear una anomenada "animació". 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). Per ser més precisos, la imatge que volem ser animats han de tenir un major z-index de la imatge de fons per sota d'ella (és com treballar amb capes en Photoshop). In order to animate the background image we need some javascript work to be done. Per tal d'animar la imatge de fons que necessitem una mica de treball Javascript per fer. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Per descomptat, com un gran fan de jQuery, jQuery que he utilitzat per fer totes les coses d'animació.

Here's the script I've come up with: Aquí està el script que he arribat amb:

(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); valors per defecte (funció ($) ($. fn.enliven = function (options) (var = (bgImage:'', durada: 3000); opcions var = $. prorrogar (per defecte, opcions); IMH this.attr var = ( "alçada"), Law = this.attr ( "ample"); this.wrap (''); this.css ( "posició", "absoluta"); $('#'+ 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 (' height ')) / 2; getrand function () (var = nr Math.floor (Math.random () * 2); nr retorn == 0? -1:1;) function randimate (obj) (var pH = Math.floor (IMH * 20/100), VP = 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 (), si (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")). animar ((left: newleft + "px", a dalt: newTop + "px"), defaults.duration, "lineal", 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. El codi de dalt funciona com un plugin de jQuery, per la qual cosa s'ha d'incloure a la pàgina, després de la inclusió de jQuery. In order to animate an image, you should use this code: Per tal d'animar una imatge, vostè ha d'utilitzar aquest codi:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'Image_selector'). Animen ((bgImage: ". / Path_to_background_image.png", durada: 1000)); / / durada és el temps d'una animació en temps de fons 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Heus aquí un exemple boig 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 Heus aquí un altre exemple no boja 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 Si t'agrada la idea i volen més característiques, envieu-me una línia en un comentari i vaig a tractar de millorar el codi i afegir més característiques de

Related posts: Llocs relacionats amb:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Què passa si l'animació jQuery no es dispara / inici?
2. JavaScript: Get anchor from URL JavaScript: Obtenir l'àncora de l'URL
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Com obtenir l'índex (posició dins d'un grup) d'un objecte amb jQuery?
4. Javascript: How to validate email address with JavaScript? Javascript: Com validar l'adreça de correu electrònic amb JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Enviar funcionar com un paràmetre a una altra funció (callbacks)