JavaScript: GIFless animation. JavaScript: animazzjoni GIFless. Animate images,logos with jQuery Janimaw immaġini, logos jQuery

Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Lulju, 2009 mill Dragos fl-Kodifika, Design, JavaScript & 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). Wara playing xi żmien bil-pożizzjoni relattiva u assoluta, stajt ndunat wieħed aspett kbira ta 'l-immaġini png format (immaġini probabbilment gif huma wkoll tajbin, iżda peress li aħna qed jippruvaw joħolqu animazzjoni GIFless, jien mhux ser tuża xi ritratti gif f'dan il-tutorja).

So here's aa PNG (transparent text), with the name of this website: So here's aa PNG (test trasparenti), bl-isem ta 'din il-websajt:

Transparent Logo Trasparenti Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Il-trick ta 'janimaw immaġini, mingħajr il-ħtieġa ta' l-użu tal-karatteristiċi format GIF immaġini, huma kif ġej:

We have an image with transparent text written on it. Għandna l-immaġini bil test trasparenti miktub fuqu. 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”. Biex tħeġġeġ it-test trasparenti, għandna bżonn biex jitqiegħed isfond image taħt l-immaġini attwali u jiċċaqalqu din ix-xbieha l-isfond, sabiex tinħoloq l-hekk imsejħa "animazzjoni". 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). Biex wieħed ikun aktar preċiż, l-immaġni irridu li jkun animat għandu jkollu z-indiċi ogħla mill-isfond image taħtu (huwa simili li jaħdmu ma 'saffi fil Photoshop). In order to animate the background image we need some javascript work to be done. Sabiex tħeġġeġ l-isfond image neħtieġu javascript xi xogħol xi jsir. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Of course, bħala big fan ta 'jQuery, stajt jQuery użati biex jagħmlu l-għalf animazzjoni.

Here's the script I've come up with: Hawn l-iskrittura stajt toħroġ bi:

 (function($){ (funzjoni ($) (
            $.fn.enliven = function(options) { $. fn.enliven = il-funzjoni (għażliet) (
                var defaults = { defaults var = (
                    bgImage: '', bgImage:'',
                    duration:3000 tul: 3000
                }; );
                var options = $.extend(defaults, options); għażliet var = $. jestendu (nuqqasijiet, għażliet);
                var imH=this.attr("height"), imH var = this.attr ( "għoli"),
                imW=this.attr("width"); imW = this.attr ( "wisa");
                this.wrap(' this.wrap ( "

'); ");
                this.css("position","absolute"); this.css ( "pożizzjoni ta", "assoluta");
                $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + "Cont"). tehmeż ( "

'); ");
                var var
                maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG "+ this.attr (" className ")). attr clientWidth (" ")-this.attr (" wisa ')) / 2,
                maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG "+ this.attr (" className ")). attr clientHeight (" ")-this.attr (" għoli ")) / 2;
                function getrand() { funzjoni getrand () (
                    var nr=Math.floor(Math.random()*2); nr var = Math.floor (Math.random () * 2);
                    return nr==0?-1:1; nr ritorn == 0? -1:1;
                } )
                function randimate(obj) { randimate funzjoni (obj) (
                    var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); ph var = 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; jekk (newLeft> 0) newLeft = 0;
                    else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; inkella jekk (newLeft <-maxLeft) newLeft =- maxLeft +1; jekk (newTop> 0) newTop = 0;
                    else if(newTop<-maxTop) inkella jekk (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")). janimaw ((xellug: newLeft + "px", top: newTop + "px"), defaults.duration, "lineari", il-funzjoni () (randimate (obj );));
                } )
                return this.each(function(){ this.each ritorn (funzjoni () (
                    randimate($(this)); randimate ($ (dan));
                }); ));
            }; );
        })(jQuery); )) (jQuery); 

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Il-kodiċi ta 'hawn fuq xogħlijiet bħala plugin tal jQuery, għalhekk għandu jkun inkluż fil-paġna, wara l-inklużjoni ta' jQuery. In order to animate an image, you should use this code: Sabiex janimaw 'immaġni, għandek tuża dan il-kodiċi:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ image_selector ( ""). enliven ((bgImage: ". / path_to_background_image.png", tul ta 'żmien: 1000)); / / tul huwa l-ħin ta' animazzjoni-isfond ta 'żmien 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Here's a crazy eżempju 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 Hawn ieħor mhux eżempju crazy 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 Jekk inti bħall-idea u rridu aktar karatteristiċi, drop me a line fil-kumment u I'll jippruvaw itejbu l-kodiċi u żid aktar karatteristiċi

Related posts: Related postijiet:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: X'jiġri jekk jQuery animazzjoni ma 'nar / tibda?
2. JavaScript: Get anchor from URL JavaScript: Get ankra mill-URL
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Kif tista 'tikseb l-indiċi (il-pożizzjoni fi ħdan grupp) ta' oġġett jQuery?
4. Javascript: How to validate email address with JavaScript? Javascript: Kif biex jivvalida l-indirizz email bl JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Send funzjoni bħala parametru ieħor għall-funzjoni (callbacks)