JavaScript: GIFless animation. Javascript: GIFless animatsioon. Animate images,logos with jQuery Animeeritud piltide, logode jQuery
Posted on 23. Postitatud 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Juuli, 2009 Dragos in kodeerimise, Design, JavaScript ja 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). Pärast mängib mõnda aega koos asend ja absoluutne, olen märganud, üks suur osa pildi PNG formaadis (arvatavasti gif pildid on ka hea, aga kuna me püüame luua GIFless animatsioon, ma ei kasuta mingeid gif pilte Käesoleva juhendaja).
So here's aa PNG (transparent text), with the name of this website: Nii et siin on aa PNG (läbipaistev tekst), mille nimi kodulehel:
Transparent Logo Läbipaistev Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Vaid elavdamine, pilte, ilma et oleks vaja kasutada GIF-vormingus pilt funktsioonid on järgmised:
We have an image with transparent text written on it. Meil on pilt läbipaistva tekst kirjutatud. 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”. Animoinnissa läbipaistev tekst peame koht taustapildi alla tegelikku pilti ja liigutage seda taustapilti, et luua nn "animatsioon". 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). Et olla täpsem, pildi tahame olla animeeritud peaks olema suurem z-indeks üle taustapildi all (see on nagu töötavad kihid Photoshop). In order to animate the background image we need some javascript work to be done. Et elus taustapilt peame mõned javascript tööd teha. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Muidugi, kui suur fänn jQuery, olen kasutanud jQuery teha kõik animatsioon kraam.
Here's the script I've come up with: Here's the script Olen tulla:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (võimalused) ( var defaults = { var vaikimisi = ( bgImage: '', bgImage:'', duration:3000 kestus: 3000 }; ); var options = $.extend(defaults, options); var võimalusi = $. laiendada (vaikimisi, valikud); 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 ( "positsioon", "absoluutne"); $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr (className ") +" Cont "). 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 (kõrgus)) / 2; function getrand() { funktsiooni getrand () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; tagasi nr == 0? -1:1; } ) function randimate(obj) { funktsiooni 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")). animeerida ((left: newLeft + "px" top: newTop + "px"), defaults.duration "lineaarne", function () (randimate (obj );)); } ) return this.each(function(){ tagasi 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. Ülal olev kood töötab plugin on jQuery, seega tuleks lisada lehele, pärast lisada jQuery. In order to animate an image, you should use this code: Et elus pilt, peate kasutama seda koodi:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector "). elavdada ((bgImage:". / path_to_background_image.png ", kestus 1000)); / / ajaks aeg on ühe ajal taustal animatsioon Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Siin on hull näide 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 Siin on veel üks mitte-hull näide 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 Kui sulle meeldib idee ja tahad rohkem funktsioone, tilk minu rida märkusi ja ma proovida parandada koodi ja lisatakse uusi funktsioone 
Related posts: Seonduvad postitused:
- JavaScript: What if jQuery animation doesn't fire/start? Javascript: Mida teha, kui jQuery animatsioon ei tule alustada?
- JavaScript: How to get the index (position within a group) of an object with jQuery? Javascript: Kuidas saada indeks (seisukoha rühma) objekti jQuery?
- JavaScript: Get anchor from URL JavaScript: Get kinnistada saadud URL
- Javascript: How to validate email address with JavaScript? Javascript: Kuidas kinnitada e-posti aadress JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) Javascript: Saada funktsiooni parameeter teise funktsiooni (kutse,)
