JavaScript: GIFless animation. JavaScript: animação GIFless. Animate images,logos with jQuery Anime imagens, logotipos com jQuery
Posted on 23. Postado em 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Julho de 2009 por Dragos na Codificação, Design, 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). Depois de jogar algum tempo com a posição relativa e absoluta, tenho notado um grande aspecto de um formato de imagem PNG (imagens gif, provavelmente, também são boas, mas já que estamos tentando criar uma animação GIFless, não vou usar qualquer imagens gif Neste tutorial).
So here's aa PNG (transparent text), with the name of this website: Então aqui está PNG aa (texto transparente), com o nome do site:
Transparent Logo Logo Transparent
The trick of animating images, without the need of using the GIF image format features, are as follow: O truque da animação de imagens, sem a necessidade de usar os recursos de imagem formato GIF, são as seguintes:
We have an image with transparent text written on it. Temos uma imagem transparente com o texto escrito por ele. 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, é preciso colocar uma imagem de fundo abaixo da imagem real e passar esta imagem de fundo, a fim de criar uma animação 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 mais preciso, a imagem que queremos ser animado deve ter um z-index maior do que a imagem de fundo abaixo dele (que é como trabalhar com camadas no Photoshop). In order to animate the background image we need some javascript work to be done. A fim de animar a imagem de fundo que precisam de algum trabalho javascript para ser feito. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Claro que, como um grande fã de jQuery, eu usei o jQuery para fazer todas as coisas da animação.
Here's the script I've come up with: Aqui está o script que eu vim acima com:
(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); defaults (function ($) ($. fn.enliven = function (options) (var = (bgImage:'', duração: 3000); var options = $. estender (defaults, options); imh this.attr var = ( "altura"), IMW = this.attr ( "width"); this.wrap ( ''); this.css ( "position", "absoluto"); $('#'+ 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 função nr () (var = Math.floor (Math.random () * 2); nr retorno == 0? -1:1;) function randimate (obj) (var pH = Math.floor (IHM * 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 <-newLeft) maxLeft =- 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);));) 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. O código acima funciona como um plugin de jQuery, assim que deve ser incluído na página, após a inclusão da jQuery. In order to animate an image, you should use this code: A fim de animar uma imagem, você deve 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", duração: 1000)); / / duração é o tempo de uma animação de fundo tempo Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Aqui está um exemplo louco 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 Aqui está outro exemplo não louco 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 você gosta da idéia e quiser mais recursos, cai-me uma linha em um comentário e eu vou tentar melhorar o código e adicionar mais recursos 
Related posts: Related posts:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: E se a animação jQuery não activado / começar?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Como obter o índice (posição dentro de um grupo) de um objeto com jQuery?
- Javascript: How to validate email address with JavaScript? Javascript: Como validar endereço de e-mail com JavaScript?
- JavaScript: Get anchor from URL JavaScript: Get âncora de URL
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Enviar funcionar como um parâmetro para outra função (callbacks)
