JavaScript: GIFless animation. JavaScript: animación GIFless. Animate images,logos with jQuery Ánimo fotos, logotipos con jQuery

Posted on 23. Posta en 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Xullo de 2009 por Dragos na Codificación, Deseño, JavaScript e 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). Despois de xogar algún tempo coa posición relativa e absoluta, teño notado un gran aspecto de un formato de imaxe PNG (imaxes gif, probabelmente, tamén son boas, pero xa que estamos intentando crear unha animación GIFless, non vou empregar calquera imaxes gif Neste tutorial).

So here's aa PNG (transparent text), with the name of this website: Entón aquí está PNG aa (texto transparente), o nome do sitio:

Transparent Logo Logo Transparent

The trick of animating images, without the need of using the GIF image format features, are as follow: O truco da animación de imaxes, sen a necesidade de utilizar os recursos de imaxe formato GIF, son as seguintes:

We have an image with transparent text written on it. Temos unha imaxe transparente co texto escrito por el. 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 o texto transparente, hai que poñer unha imaxe de fondo debaixo da imaxe real e pasar esta imaxe de fondo, a fin de crear unha animación chamada ". 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áis preciso, a imaxe que queremos ser animado que ter un z-index maior que a imaxe de fondo debaixo del (que é coma traballar con capas en Photoshop). In order to animate the background image we need some javascript work to be done. Co fin de animar a imaxe de fondo que é necesario un traballo JavaScript para ser feito. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Por suposto que, como un gran fan de jQuery, eu usei o jQuery para facer todas as cousas da animación.

Here's the script I've come up with: Aquí está o script que eu vin por riba con:

 (function($){ (function ($) (
            $.fn.enliven = function(options) { $. Fn.enliven = function (options) (
                var defaults = { parámetros por defecto = (var
                    bgImage: '', bgImage:'',
                    duration:3000 Duración: 3000
                }; );
                var options = $.extend(defaults, options); var options = $. extender (parámetros por defecto, options);
                var imH=this.attr("height"), imh this.attr var = ( "canto"),
                imW=this.attr("width"); IMW = this.attr ( "width");
                this.wrap(' this.wrap ( '

'); ');
                this.css("position","absolute"); this.css ( "position", "absoluto");
                $('#'+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); var nr = Math.floor (Math.random () * 2);
                    return nr==0?-1:1; nr retorno == 0? -1:1;
                } )
                function randimate(obj) { randimate function (obj) (
                    var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); ph var = Math.floor (ihm * 20/100), pw = 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 <-newLeft) maxLeft =- 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" top: 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. O código anterior funciona como un plugin de jQuery, así que debe ser incluído na páxina, tras a inclusión do jQuery. In order to animate an image, you should use this code: Co fin de animar unha imaxe, pode usar 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'). Animar ((bgImage:. / Path_to_background_image.png ", duración: 1000)), / / duración é o tempo de animación de fondo tempo 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Aquí está un exemplo tolo 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 Velaí outro exemplo non tolo 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 Se lle gusta a idea e queres máis recursos, cai-me unha liña en un comentario e eu vou tentar mellorar o código e engadir máis recursos

Related posts: Related posts:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: E se a animación jQuery non activar / comezar?
2. JavaScript: Get anchor from URL JavaScript: Get Referencia de URL
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Como obter o índice (posición dentro dun grupo) dun obxecto con jQuery?
4. Javascript: How to validate email address with JavaScript? Javascript: Como validar enderezo de correo-e JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Enviar funcionar como un parámetro para outra función (callbacks)