JavaScript: GIFless animation. JavaScript: GIFless animāciju. Animate images,logos with jQuery Dzīva attēlus, logotipus ar jQuery

Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Jūl, 2009 by Dragos in Kodēšana, Dizains, JavaScript un 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ēc spēles kādu laiku pozīciju relatīvā un absolūtā, es esmu ievērojis vienu lielu aspektu PNG attēlu formātu (iespējams gif attēli ir labi, bet, tā kā mēs cenšamies radīt GIFless animācija, es neizmanto nekādus gif attēlus ar šo pamācību).

So here's aa PNG (transparent text), with the name of this website: Tātad, šeit ir aa PNG (caurspīdīgas teksts), ar nosaukumu šajā tīmekļa vietnē:

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Triks apguve attēliem, bez vajadzības izmantot GIF attēla formāta pazīmes ir šādas:

We have an image with transparent text written on it. Mums ir attēls ar pārredzamu teksts uzrakstīts par to. 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”. Animēt pārskatāmu teksta mums vietu fona attēlu zemāk faktiskais attēla un pārvietojiet šo fona attēlu, lai radītu tā saukto "animāciju". 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). Lai būtu precīzāk, attēlu mēs gribam būt animēta būtu augstāka z-indeksu, kā fona attēls, zem tā (tas ir kā strādāt ar slāņiem Photoshop). In order to animate the background image we need some javascript work to be done. Lai animēt fona attēlu mums ir dažas javascript jāstrādā. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Protams, kā liels ventilators jQuery, esmu izmantot jQuery darīt visu animāciju stuff.

Here's the script I've come up with: Lūk skripts Esmu nākt klajā ar:

(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); (function ($) ($. fn.enliven = function (iespējas) (var nepildīšanas = (bgImage:'', ilgums: 3000); var iespējām = $. paplašināt (saistību nepildīšanas iespējas); var imH = this.attr ( "augstums"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "pozīciju", "absolūtu"); $('#'+ this.attr ( "norādīts klases" ) + 'Turpin "). pievienot (' '); var maxLeft =($('. LBG' + this.attr (" norādīts klases ")). attr (" clientWidth ")-this.attr (" platums ")) / 2, maxTop =($('. LBG '+ this.attr ( "norādīts klases")). attr (clientHeight ")-this.attr (" augstums ")) / 2; funkcija getrand () (var nr = Math.floor (Math.random () * 2); atpakaļ nr == 0? -1:1;) funkcija randimate (obj) (var pH = Math.floor (imH * 20/100) pw = Math.floor (imW * 20/100); newLeft =$(". LBG "+ obj.attr (" norādīts klases ")). attr (" offsetLeft ") + Math.floor (Math.random () * pW) * getrand () ; newTop =$(". LBG "+ obj.attr (" norādīts klases ")). 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 ( "norādīts klases")). animēt ((left: newLeft + "px" top: newTop + "px"), defaults.duration "lineārie", function () (randimate (obj);));) atpakaļ this.each (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. Kods virs darbojas kā spraudnis ar jQuery, tāpēc būtu jāiekļauj lapā, pēc iekļaušanas jQuery. In order to animate an image, you should use this code: Lai animētu attēlu, jums vajadzētu izmantot šo kodu:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector "). atdzīvināt ((bgImage:". / path_to_background_image.png ", ilgums: 1000)); / / ilgums ir laiks, vienu reizi background animācija 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Lūk crazy piemērs 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 Lūk, vēl nav traks piemēram 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 Ja jums patīk ideja un vēlas vairākas pazīmes, piliens mani līniju komentāru un es mēģināšu uzlabot kodu un pievienot vairākas pazīmes

Related posts: Related posts:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Ko darīt, ja jQuery animācijas nav uguns / sākt?
2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Kā nokļūt indekss (amatu grupā) un objekts ar jQuery?
3. Javascript: How to validate email address with JavaScript? Javascript: Kā lai apstiprinātu e-pasta adresi ar JavaScript?
4. JavaScript: Get anchor from URL JavaScript: Get enkuru no URL
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Sūtīt funkcija kā parametru citai funkcijai (callbacks)