JavaScript: GIFless animation. JavaScript: GIFless animacije. Animate images,logos with jQuery Animate slike, logotipi s jQuery
Posted on 23. Objavljeno dne 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Julij 2009, ki ga Dragos v Coding, Design, JavaScript in 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 nekaj časa igral z lego relativno in absolutno, sem opazil eno veliko vidik png slike (gif, so verjetno tudi dobro, ker pa poskušamo ustvariti GIFless animacije, jaz ne bo uporabila vse gif v tem Tutorial).
So here's aa PNG (transparent text), with the name of this website: Torej, tukaj je aa PNG (pregledna besedilo), z imenom te spletne strani:
Transparent Logo Transparent Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: Trik of animacija slik, brez potrebe po uporabi slike formata GIF funkcije, so:
We have an image with transparent text written on it. Imamo slike s preglednimi besedilo napisano na njej. 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”. Če želite animirati pregledno besedilo, moramo postaviti ozadje sliko spodaj dejansko sliko in premakniti to ozadje, da se ustvari tako imenovani "animacija". 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). Če želite biti bolj natančna, slika želimo, da bi moral biti animacije višji z indeksom, kot sliko za ozadje pod njo (kot je delo s plastmi v Photoshopu). In order to animate the background image we need some javascript work to be done. Da bi animirati sliko za ozadje moramo nekaj javascript dela, je treba opraviti. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Seveda, kot velik oboževalec jQuery, sem se uporabljajo jQuery, naj storijo vse animacije stvari.
Here's the script I've come up with: Tukaj je scenarij sem prišel gor z:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (možnosti) ( var defaults = { var neplačil = ( bgImage: '', bgImage:'', duration:3000 Trajanje: 3000 }; ); var options = $.extend(defaults, options); var options = $. razširi (zamud, opcije); var imH=this.attr("height"), var imH = this.attr ( "višina"), imW=this.attr("width"); imW = this.attr ( "width"); this.wrap(' this.wrap ( " '); '); this.css("position","absolute"); this.css ( "položaj", "absolutno"); $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + "Nadaljuj"). append ( " '); '); var var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG '+ this.attr ( "className")). attr ( "clientWidth')-this.attr ( 'širina')) / 2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG '+ this.attr ( "className")). attr ( "clientHeight')-this.attr (" višina ")) / 2; function getrand() { getrand funkcija () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; vrnitev nr == 0? -1:1; } ) function randimate(obj) { Funkcija 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, če je (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 ")). animirati ((left: newLeft +" px ", top: newTop +" px "), defaults.duration," linearna ", function () (randimate (obj );)); } ) return this.each(function(){ vrnitev 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. Koda zgoraj deluje kot plugin za jQuery, zato ga je treba vključiti v stran, po vključitvi jQuery. In order to animate an image, you should use this code: Da bi animirati sliko, morate uporabljati to kodo:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). poživijo ((bgImage: ". / path_to_background_image.png", trajanje: 1000)); / / čas je čas od časa ozadja animacija Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Tukaj je noro primer 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 Tu je še en non-nor na primer 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 Če vam je všeč ideja in želite več funkcij, spusti me črte v komentar in bom poskusil izboljšati kodo in dodali več funkcij 
Related posts: Podobni objav:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Kaj če jQuery animacije ne ognja / začeti?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Kako indeks (položaj v skupini) predmeta s jQuery?
- JavaScript: Get anchor from URL JavaScript: Get sidro iz URL-ja
- Javascript: How to validate email address with JavaScript? Javascript: kako potrditi e-naslov z JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Pošljite funkcijo kot parameter na drugo delovno mesto (callbacks)
