JavaScript: GIFless animation. JavaScript: animación GIFless. Animate images,logos with jQuery Imágenes animadas, logos con jQuery

Posted on 23. Publicado en 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Julio de 2009, por Dragos en la codificación, Diseño, JavaScript y 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). Después de jugar un rato con la posición relativa y absoluta, he notado un aspecto de gran formato de imagen PNG (imágenes gif probablemente también son buenas, pero desde que estamos tratando de crear una animación GIFless, no voy a usar cualquier imagen gif en este tutorial).

So here's aa PNG (transparent text), with the name of this website: Así que aquí está PNG AA (texto transparente), con el nombre de este sitio:

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: El truco de animación de imágenes, sin necesidad de utilizar las características de formato de imagen GIF, son los siguientes:

We have an image with transparent text written on it. Tenemos una imagen con texto transparente escrito 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”. Para animar el texto transparente, tenemos que colocar una imagen de fondo por debajo de la imagen real y mover la imagen de fondo, con el fin de crear una llamada "animación". 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). Para ser más precisos, la imagen que queremos ser animados deben tener un mayor z-index de la imagen de fondo por debajo de ella (es como trabajar con capas en Photoshop). In order to animate the background image we need some javascript work to be done. Con el fin de animar la imagen de fondo que necesitamos algo de trabajo Javascript para hacer. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Por supuesto, como un gran fan de jQuery, jQuery que he utilizado para hacer todas las cosas de animación.

Here's the script I've come up with: Aquí está el script que he llegado con:

 (function($){ (función ($) ( 
             $.fn.enliven = function(options) { $. fn.enliven = function (opciones) ( 
                 var defaults = { defaults (var = 
                     bgImage: '', bgImage:'', 
                     duration:3000 Duración: 3000 
                 }; ); 
                 var options = $.extend(defaults, options); var options = $. prorrogar (por defecto, opciones); 
                 var imH=this.attr("height"), imh var = this.attr ( "altura"), 
                 imW=this.attr("width"); IMW = this.attr ( "ancho"); 
                 this.wrap(' this.wrap ( ' 

 '); '); 
                 this.css("position","absolute"); this.css ( "posición", "absoluta"); 
                 $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'Cont.'). append ( " 

 '); '); 
                 var var 
                 maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, LBG =($('. maxLeft '+ 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); nr var = Math.floor (Math.random () * 2); 
                     return nr==0?-1:1; nr retorno == 0? -1:1; 
                 } ) 
                 function randimate(obj) { randimate función (obj) ( 
                     var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); ph var = Math.floor (IMH * 20/100), VP = Math.floor (IMW * 20/100); 
                     newLeft=$(".lbg"+obj.attr("className")).attr("offsetLeft")+Math.floor(Math.random()*pw)*getrand(); LBG =$(". newleft "+ 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, si (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")). animar ((left: newleft + "px", arriba: newTop + "px"), defaults.duration, "lineal", function () (randimate (obj );)); 
                 } ) 
                 return this.each(function(){ this.each return (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. El código de arriba funciona como un plugin de jQuery, por lo que debe incluirse en la página, después de la inclusión de jQuery. In order to animate an image, you should use this code: Con el fin de animar una imagen, usted debe utilizar este código:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). animan ((bgImage: ". / path_to_background_image.png", duración: 1000)); / / duración es el tiempo de una animación en tiempo de fondo 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php He aquí un ejemplo loco 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 He aquí otro ejemplo no loca 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 te gusta la idea y quieren más características, envíeme una línea en un comentario y voy a tratar de mejorar el código y añadir más características de

Related posts: Puestos relacionados con:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: ¿Qué pasa si la animación jQuery no se dispara / inicio?
2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Cómo obtener el índice (posición dentro de un grupo) de un objeto con jQuery?
3. JavaScript: Get anchor from URL JavaScript: Obtener el ancla de la URL
4. Javascript: How to validate email address with JavaScript? Javascript: Cómo validar la dirección de correo electrónico con JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Enviar funcionar como un parámetro a otra función (callbacks)