JavaScript: GIFless animation. Јава: ГИФлесс анимације. Animate images,logos with jQuery Анимирање слика, логотипа са јКуеры
Posted on 23. Постед он 23.. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Јул 2009 бы Драгош у кодирању, дизајн, Јава & Ајакс
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). Након неког времена игра са позиције апсолутне и релативне, приметио сам један велики аспект гиф формат слике (ГИФ слике вероватно су такође добре, али пошто смо покушавају да створе ГИФлесс анимација, нећу користити било ГИФ слике у овом упутству).
So here's aa PNG (transparent text), with the name of this website: Дакле, овде АА формату ПНГ (транспарентно текст), са именом овог сајта:
Transparent Logo Транспарентни лого
The trick of animating images, without the need of using the GIF image format features, are as follow: Трик анимације, слике, без потребе да користите ГИФ формат слике карактеристике, су следеце:
We have an image with transparent text written on it. Имамо слике са транспарентним текст написан на њему. 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”. Да бисте анимирали текст транспарентним, морамо да поставите позадинску слику испод стварне слике и преместите ову слику у позадини, у циљу стварања тзв "анимација". 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). Да будемо прецизнији, слике желимо да буду анимирани да имају већи з-индекс него позадинску слику испод ње (то је као да ради са слојевима у Пхотосхоп). In order to animate the background image we need some javascript work to be done. У циљу анимирања позадинску слику нам је потребан неки ЈаваСцрипт посла. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Наравно, као велики фан јКуеры, ја сам користио јКуеры да све ствари анимације.
Here's the script I've come up with: Ево скрипте сам смислио:
(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); (функција ($) ($ фн.енливен = функција (опција). подразумеване (вар = (бгИмаге:'', трајање: 3000); вар опције = $. прошири (подразумеване, опције); вар ИМХ тхис.аттр = ( "висине"), имУ = тхис.аттр ( "Ширина"); тхис.урап ( ''); тхис.цсс ( "став", "апсолутне"); $('#'+ тхис.аттр ( "цлассНаме" ) + "Цонт ') додајте (' '); вар максЛефт =($('. ЛБГ" + тхис.аттр ( "цлассНаме")). АТТР (' цлиентУидтх ').-тхис.аттр (' Ширина ')) / 2, максТоп =($('. ЛБГ "+ тхис.аттр (" цлассНаме ")) АТТР ( 'цлиентХеигхт').-тхис.аттр ( 'висина')) / 2; гетранд функција () (вар број = Матх.флоор (Матх.рандом () * 2); повратак бр == 0? -1:1;) функција рандимате (ОБЈ) (вар пХ = Матх.флоор (ИМХ * 20/100), ПУ = Матх.флоор (имУ * 20/100); неуЛефт =$(". ЛБГ, "+ обј.аттр (" цлассНаме ")) АТТР (" оффсетЛефт ") + Матх.флоор (Матх.рандом () * ПУ) * гетранд. () ; неуТоп =$(". ЛБГ, "+ обј.аттр (" цлассНаме ")) АТТР (" оффсетТоп ") + Матх.флоор (Матх.рандом. () * пХ) * гетранд (); ако (неуЛефт> 0) неуЛефт = 0; друго ако је (неуЛефт <-максЛефт) неуЛефт =- максЛефт +1, а ако (неуТоп> 0) неуТоп = 0; друго ако је (неуТоп <-максТоп) неуТоп =- максТоп +1, $ ( 'ЛБГ'. + обј.аттр ( "цлассНаме")) анимирате. ((лево: неуЛефт + "пкс", врх: неуТоп + "пкс"), дефаултс.дуратион, "линеарно", функција () (рандимате (ОБЈ);));) повратак тхис.еацх (функција () (рандимате ($ (ова));)););)) (јКуеры); The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Код изнад ради као додатак за јКуеры, тако да би требало да буду укључени у страну, након укључивање јКуеры. In order to animate an image, you should use this code: У циљу анимирања слику, требало би да користите овај код:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'имаге_селецтор') оживљава. ((бгИмаге: "/ патх_то_бацкгроунд_имаге.пнг". трајање: 1000)); / / трајање је у року од једног времена у позадини анимације Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Овде луд пример 1: хттп://иуебдевел.цом/уп-цонтент/уплоадс/2009/07/лого.пхп
Here's another non-crazy example 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php Ево још једног не-луд пример 2: хттп://иуебдевел.цом/уп-цонтент/уплоадс/2009/07/лого2.пхп
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 Ако вам се свиђа идеја и желите више функција, кап ми ред у коментар, а ја ћу покушати да побољша код и додајте више функција 
Related posts: Повезани постови:
- JavaScript: What if jQuery animation doesn't fire/start? Јава: Шта ако јКуеры анимација не Фире почети?
- JavaScript: Get anchor from URL Јава: Набавите сидро са УРЛ
- JavaScript: How to get the index (position within a group) of an object with jQuery? Јава: Како добити индекс (позицију у групи) за објекат са јКуеры?
- Javascript: How to validate email address with JavaScript? Јавасцрипт: Како бисте проверили е-адресу са ЈаваСцриптом?
- JavaScript: Send function as a parameter to another function (callbacks) Јава: Пошаљите функције као параметар за неку другу функцију (цаллбацкс)
