JavaScript: GIFless animation. JavaScript: animazione GIFless. Animate images,logos with jQuery Animare le immagini, i loghi con jQuery
Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Luglio, 2009 da Dragos in Coding, 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). Dopo aver giocato qualche tempo con la posizione relativa e assoluta, ho notato uno un aspetto di grande formato PNG (immagini gif, probabilmente sono anche buone, ma dal momento che stiamo cercando di creare una animazione GIFless, non voglio usare immagini gif in questo tutorial).
So here's aa PNG (transparent text), with the name of this website: Quindi, ecco PNG aa (testo trasparente), con il nome di questo sito:
Transparent Logo Logo trasparente
The trick of animating images, without the need of using the GIF image format features, are as follow: Il trucco di animazione delle immagini, senza la necessità di utilizzare le funzionalità immagine in formato GIF, sono i seguenti:
We have an image with transparent text written on it. Abbiamo un'immagine con testo trasparente scritto su di esso. 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 animare il testo trasparente, abbiamo bisogno di inserire un'immagine di sfondo sotto l'immagine reale e spostare l'immagine di sfondo, al fine di creare una cosiddetta "animazione". 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 essere più precisi, l'immagine che vogliamo essere animato dovrebbe avere un maggiore z-index che l'immagine di sfondo di sotto di essa (è come lavorare con i livelli in Photoshop). In order to animate the background image we need some javascript work to be done. Al fine di animare l'immagine di sfondo abbiamo bisogno di alcuni lavori di javascript da fare. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Naturalmente, come un grande fan di jQuery, jQuery ho usato per fare tutte le animazioni.
Here's the script I've come up with: Ecco lo script mi è venuta in mente:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (options) ( var defaults = { var defaults = ( bgImage: '', bgImage:'', duration:3000 Durata: 3000 }; ); var options = $.extend(defaults, options); var options = $. extend (defaults, options); var imH=this.attr("height"), IMH var = this.attr ( "height"), imW=this.attr("width"); IMW = this.attr ( "width"); this.wrap(' this.wrap ( ' '); '); this.css("position","absolute"); this.css ( "posizione", "assoluto"); $('#'+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 ritorno == 0? -1:1; } ) function randimate(obj) { randimate function (obj) ( var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); 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(); 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; 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", in alto: newTop + "px"), defaults.duration, "lineare", 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. Il codice precedente funziona come un plug in di jQuery, quindi dovrebbe essere incluso nella pagina, dopo l'integrazione di jQuery. In order to animate an image, you should use this code: Al fine di animare l'immagine, si dovrebbe usare questo codice:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). animano ((bgImage: ". / path_to_background_image.png", durata: 1000)); / / la durata è il tempo di una animazione sullo sfondo il tempo Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Ecco un esempio crazy 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 Ecco un altro esempio non crazy 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 vi piace l'idea e desideri più funzionalità, mi calo una riga in un commento e cercherò di migliorare il codice e aggiungere funzionalità più 
Related posts: Related posts:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: jQuery Che cosa succede se l'animazione non viene generato / start?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Come ottenere l'indice (posizione all'interno di un gruppo) di un oggetto con jQuery?
- JavaScript: Get anchor from URL JavaScript: Get ancora da URL
- Javascript: How to validate email address with JavaScript? Javascript: Come validare indirizzo email con JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Invia funzione come parametro a un'altra funzione (callback)
