JavaScript: GIFless animation. JavaScript: GIFless animacija. Animate images,logos with jQuery Gyva nuotraukų, logotipų su jQuery
Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Liepa, 2009 Dragos ir kodavimas, projektavimas, JavaScript ir 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). Po groti kai su pozicija laiko santykinė bei absoliuti, aš pastebėjau, vienas didelis aspektas, PNG formato (tikėtina Gif taip pat yra gera, bet kadangi mes stengiamės sukurti GIFless animacija, I won't naudoti bet Gif Šiame tutorial).
So here's aa PNG (transparent text), with the name of this website: Taigi čia AA PNG formato (skaidrus tekstas), su šio tinklalapio pavadinimas:
Transparent Logo Permatomas logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Nuo pagyvėja vaizdai apgauti, be naudoti GIF formato funkcijų reikia, yra šios:
We have an image with transparent text written on it. Turime vaizdas su skaidrus tekstas, parašytas apie jį. 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”. Animuoti skaidrus tekstą, turime vieta fono paveikslėlį žemiau tikrasis vaizdas ir perkelti tai vaizdas, kad būtų sukurta vadinamoji "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). Tiksliau, vaizdas norime būti animacinis turėtų būti didesnė z-index kaip fono paveikslėlį žemiau jo (jos patinka dirbti su sluoksniais į Photoshop). In order to animate the background image we need some javascript work to be done. Siekiant animuoti fono paveikslėlį mums reikia veikiancio Javascript, tam reikia daug nuveikti. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Žinoma, kaip didelis gerbėjas jQuery, I've used jQuery daryti viską animacija stuff.
Here's the script I've come up with: Štai scenarijų 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); (function ($) ($. fn.enliven = function (galimybių) (var nutylėjimą = (bgImage:''trukmė: 3000) var options = $. pratęsti (pagal nutylėjimą, duomenys); var imH = this.attr ( "aukštis"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "pozicija", "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 ( "aukštis")) / 2; funkcija getrand () (var NR = Math.floor (Math.random () * 2); grįžti nr == 0? -1:1;) funkcija randimate (obj) (var tel = 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 ", viršuje: newTop +" px "), defaults.duration," linijinis ", function () (randimate (obj);));) grįžti 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. Pirmiau dirba su jQuery plugin kodas, todėl ji turėtų būti įtraukta į puslapį, po jQuery įtrauktis. In order to animate an image, you should use this code: Siekiant animuoti vaizdas, turėtumėte naudoti šį kodą:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector "). gyvinti ((bgImage:". / path_to_background_image.png ", trukmė: 1000)); / / trukmė yra nuo vienu metu fono animacija laikas Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Here's crazy 1 pavyzdys: 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 Štai dar ne Crazy 2 pavyzdys: 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 Jei jums patinka idėja ir nori daugiau funkcijų, lašas mane į komentaro eilutę, ir aš pabandyti pagerinti kodą ir pridėti daugiau funkcijų 
Related posts: Related posts:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Ką daryti, jei jQuery animacija nėra gaisro / paleisti?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Kaip gauti indeksą (pozicijos grupės) su jQuery objektas?
- Javascript: How to validate email address with JavaScript? Javascript: Kaip patvirtinti elektroninio pašto adresą su "JavaScript?
- JavaScript: Get anchor from URL JavaScript: Get inkaro iš URL
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Siųsti funkcija kaip parametro kitos funkcijos (Atgalinės iššūkius)
