JavaScript: GIFless animation. JavaScript: GIFless animation. Animate images,logos with jQuery Animera bilder, logotyper med jQuery
Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Juli, 2009 av Dragos i Coding, Design, JavaScript och 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). Efter att ha spelat en tid med position absolut och relativt, har jag märkt en stor del av png bildformat (troligen gif-bilder är också bra, men eftersom vi försöker skapa en GIFless animation, kommer jag inte använda gif-bilder i denna handledning).
So here's aa PNG (transparent text), with the name of this website: Så här är aa PNG (transparent text), med namnet på denna webbplats:
Transparent Logo Transparent Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Med konststycket att animera bilder, utan behovet av att använda GIF funktioner bildformat, är följande:
We have an image with transparent text written on it. Vi har en bild med tydlig text skriven på sig. 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”. Att animera tydlig text, måste vi placera en bakgrundsbild under den verkliga bilden och flytta denna bakgrundsbild, för att skapa en så kallad "animation". 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). För att vara mer exakt, den bild vi vill vara animerade borde ha en högre z-index än bakgrundsbild under den (det är som att arbeta med lager i Photoshop). In order to animate the background image we need some javascript work to be done. För att animera bakgrundsbilden vi behöver javascript arbete att göra. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Naturligtvis som en stor beundrare av jQuery, har jag använt jQuery för att göra allt animeringen stuff.
Here's the script I've come up with: Here's the script jag har kommit på:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = funktion (alternativ) ( var defaults = { Var defaults = ( bgImage: '', bgImage:'', duration:3000 duration: 3000 }; ); var options = $.extend(defaults, options); Var options = $. förlänga (defaults, options); var imH=this.attr("height"), Var Imh = this.attr ( "height"), imW=this.attr("width"); IMW = this.attr ( "width"); this.wrap(' this.wrap ( ' '); '); this.css("position","absolute"); this.css ( "position", "absolut"); $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + "Forts"). append ( ' '); '); var Var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. lbg '+ 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() { funktion getrand () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; return nr == 0? -1:1; } ) function randimate(obj) { funktion randimate (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(); 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(); 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")). animera ((left: newLeft + "px", top: newTop + "px"), defaults.duration, "linjära", function () (randimate (obj );)); } ) return this.each(function(){ return this.each (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. Koden ovan fungerar som en plugin för jQuery, så det borde ingå i sidan, efter införandet av jQuery. In order to animate an image, you should use this code: För att animera en bild, ska du använda denna kod:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector "). liva ((bgImage:". / path_to_background_image.png ", duration: 1000)); / / tid är tiden för en gång bakgrund animation Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Här är en galen Exempel 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 Här är en annan icke-crazy Exempel 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 Om du gillar idén och vill ha fler funktioner, släpp mig en rad i en kommentar och jag ska försöka förbättra koden och lägga till fler funktioner 
Related posts: Relaterade tjänster:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Vad händer om jQuery animation inte eld / start?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Hur man får indexet (position inom en grupp) för ett objekt med jQuery?
- JavaScript: Get anchor from URL JavaScript: Få ankare från URL
- Javascript: How to validate email address with JavaScript? Javascript: Hur validera e-postadress med JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Skicka fungera som en parameter till en annan funktion (callbacks)
