JavaScript: GIFless animation. JavaScript: GIFless animasyon. Animate images,logos with jQuery Animate görüntüler, jQuery ile logolar
Posted on 23. 23 olarak gönderildi. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Temmuz, 2009 Kodlama, Tasarım, JavaScript ve Ajax da Dragos tarafından
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). Biz bir GIFless animasyon oluşturmak için, herhangi bir gif resimleri kullanmaz çalışıyorsunuz konumu biraz zaman göreli ve mutlak oynamaya sonra, (muhtemelen gif resimlerini de iyi ama png resim biçimi büyük boy bir fark ettik Bu öğreticisi).
So here's aa PNG (transparent text), with the name of this website: Bu web sitesinin adıyla Yani burada aa PNG (şeffaf metin):
Transparent Logo Şeffaf Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: GIF resim formatı özellikleri kullanarak gerek kalmadan fotoğraf canlandırmanın hüner, vardır olarak izleyin:
We have an image with transparent text written on it. Transparan metin üzerinde yazılı olan bir görüntü var. 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”. Şeffaf metin animasyon için, gerçek görüntüsünün altında bir arka plan görüntüsü yer ve bu arka plan görüntüsü hareket amacıyla böyle adlandırılan "animasyon oluşturmak için" gerekir. 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). Daha çok, biz altında arka plan görüntüsü daha yüksek bir z-index olmalıdır animasyonlu olmak istiyorum görüntü (bu Photoshop katmanları çalışma gibi) hassas olmak. In order to animate the background image we need some javascript work to be done. Amacıyla biz yapılması gereken bazı javascript çalışması gerek arka plan görüntüsü animate. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Elbette, jQuery büyük bir yelpaze gibi, jQuery tüm animasyon şeyler yapmak için kullandım.
Here's the script I've come up with: Here I ile geldim scriptin:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (seçenekleri) ( var defaults = { var defaults = ( bgImage: '', bgImage:'', duration:3000 süre: 3000 }; ); var options = $.extend(defaults, options); var options = $. (varsayılan olarak, options) genişletmek; 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 ( "konum", "") mutlak; $('#'+this.attr("className")+'Cont').append(' $('#'+ ( "className") + 'Devam') ekler. this.attr ( ' '); '); var var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG '+ ( "className")) this.attr. attr (' clientWidth ')-this.attr (' width ')) / 2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG '+ ( "className")) this.attr. attr (' clientHeight ')-(' height ')) / 2 this.attr; function getrand() { fonksiyonu getrand () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; return nr == 0? -1:1; } ) function randimate(obj) { fonksiyonu 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 "+ (" className ")) obj.attr. attr (" offsetLeft ") + Math.floor (Math.random () * pw) * getrand (); newTop=$(".lbg"+obj.attr("className")).attr("offsetTop")+Math.floor(Math.random()*ph)*getrand(); newTop =$(". LBG "+ (" className ")) obj.attr. 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; if (<-maxLeft) newLeft =- maxLeft 1 newLeft if (newTop> 0) = 0 newTop; else if(newTop<-maxTop) 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' + ( "className")) obj.attr. animate ((left: newLeft + "px", top: newTop + "px"), defaults.duration, "" doğrusal, function () (randimate (obj );)); } ) return this.each(function(){ return this.each (function () ( randimate($(this)); ($ randimate (bu)); }); )); }; ); })(jQuery); )) (jQuery);
The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. JQuery ile dahil sonra jQuery bir eklentisi olarak çalışıyor Yukarıdaki kodu, bu nedenle sayfası dahil edilmelidir. In order to animate an image, you should use this code: Amacıyla, bu kodu kullanmanız gerekir: bir görüntü animate
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). ihya ((bgImage: ". / path_to_background_image.png", duration: 1000)); / / süre bir defa arka animasyon zamanı Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Burada bir deli örnek 1's: 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 Burada olmayan başka bir-crazy örnek 2: http://iwebdevel.com/wp-content/uploads/2009/07/logo2.php's
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 Sizin gibi fikir ve varsa, bana bir yorum bir satır yazmak istiyorum daha fazla özellik ve kod geliştirmek ve daha fazla özellik eklemek çalışacağım 
Related posts: Ilgili posta:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Ya jQuery animasyon olmayan yangın / başlar?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: jQuery ile nasıl bir nesnenin (konum bir grup içinde) kütüğü almak için?
- JavaScript: Get anchor from URL JavaScript: URL'den çapa alın
- Javascript: How to validate email address with JavaScript? Javascript: Nasıl JavaScript ile e-posta adresinizi doğrulamak için?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: başka bir işlev (geriçağırımları) bir parametre olarak işlev gönder
