JavaScript: GIFless animation. JavaScript: animacion GIFless. Animate images,logos with jQuery Imazhe gjallë, logot me jQuery
Posted on 23. Dërguar të 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Korrik, 2009 nga Dragos në kodim, Design, JavaScript dhe 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). Pasi ka luajtur pak kohë me pozicionin relativ dhe absolut, unë kam vënë re një një aspekt i madh i imazhit formatin png (imazhe gif ndoshta janë edhe të mira, por që ne po përpiqemi për të krijuar një animacion GIFless, unë nuk do të përdorë ndonjë imazhet gif në këtë tutorial).
So here's aa PNG (transparent text), with the name of this website: PNG Deri këtu aa (tekst transparente), me emrin e kësaj faqeje interneti:
Transparent Logo Transparenca Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Mashtrim i Animating imazhet, pa nevojën e përdorimit të tiparet format imazhi GIF, janë si më poshtë:
We have an image with transparent text written on it. Ne kemi nje imazh me tekst transparente shkruar mbi të. 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”. Për të gjallë tekst transparente, ne kemi nevojë për të vënë një background image poshtë imazhin aktual dhe për të shkuar këtë imazh sfond, në mënyrë që të krijojë një animacion quajtur kështu "". 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). Për të qenë më të saktë, imazhi ne duam të animuar duhet të kenë një indeks të lartë z-se background image më poshtë atë (është si punuar me shtresa në Photoshop). In order to animate the background image we need some javascript work to be done. Në mënyrë të gjallë background image kemi nevojë për disa punë javascript për t'u bërë. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Sigurisht, si një tifoz i madh i jQuery, unë e kam përdorur jQuery të bëjë të gjitha stuff animacion.
Here's the script I've come up with: Ja shkrimit unë kam ardhur deri me:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (options) ( var defaults = { defaults var = ( bgImage: '', bgImage:'', duration:3000 Video duration: 3000 }; ); var options = $.extend(defaults, options); opsionet var = $. zgjasë (defaults, opsionet); 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 ( "pozita", "absolut"); $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'k'). 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 kthimit == 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 (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 "")). gjallë ((left: newLeft + "px", i lartë: newTop + "px"), defaults.duration, "linear", function () (randimate (obj );)); } ) return this.each(function(){ this.each kthim (function () ( randimate($(this)); randimate ($ (ky)); }); )); }; ); })(jQuery); )) (jQuery);
The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Kodi më lart punon si një shtojcë e jQuery, kështu që duhet të përfshihen në faqe, pas përfshirjes së jQuery. In order to animate an image, you should use this code: Në mënyrë të gjallë një imazh, ju duhet të përdorni këtë kod:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ image_selector ( ''). gjallëroj ((bgImage: ". / path_to_background_image.png", kohëzgjatja: 1000)); / / kohëzgjatja është koha e një sfondi animacion pa kohë Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Ja një shembull i çmendur 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 Ja një tjetër jo-shembull i çmendur 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 Nëse ju pëlqen ideja dhe duan më shumë karakteristika, rënie me një vijë në një koment dhe unë do të përpiqet të përmirësojë kodin dhe shtoni më shumë karakteristika 
Related posts: Related posts:
- JavaScript: What if jQuery animation doesn't fire/start? Java: Çfarë ndodh nëse animacion jQuery nuk zjarr / filloni?
- JavaScript: Get anchor from URL JavaScript: Merrni të ankorohen nga URL
- JavaScript: How to get the index (position within a group) of an object with jQuery? Java: Si të merrni indeksi (pozitë brenda një grupi) e një objekti me jQuery?
- Javascript: How to validate email address with JavaScript? Javascript: Si të vërtetoni adresën e email me të aktivizoni Java?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Send të funksionojë si një parametër të një tjetër funksion (callbacks)
