JavaScript: GIFless animation. JavaScript: GIFless animaatio. Animate images,logos with jQuery Animoida kuvia, logoja ja jQuery

Posted on 23. Postitettu 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Heinäkuu, 2009 Dragos vuonna Koodi, Design, JavaScript-ja 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). Toiston jälkeen jonkin aikaa aseman suhteellinen ja absoluuttinen, olen huomannut yksi suuri osa png-kuvien muodossa (luultavasti gif-kuvat ovat myös hyviä, mutta koska pyrimme luomaan GIFless animaatio, en aio käyttää GIF-kuvia Tässä opetusohjelma).

So here's aa PNG (transparent text), with the name of this website: Joten tässä AA PNG (avoin teksti), jonka nimi on tällä sivustolla:

Transparent Logo Läpinäkyvä tunnuksen

The trick of animating images, without the need of using the GIF image format features, are as follow: Temppu animointiin kuvia ilman tarvetta käyttää GIF-kuvan muodossa ominaisuuksia, ovat seuraavat:

We have an image with transparent text written on it. Olemme kuvaa avoimia kirjoitetun tekstin sitä. 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”. Animoida avointa tekstin, meidän asettaa taustakuvan alle todellisen kuvan ja siirtää tämän taustakuvan, jotta voidaan luoda niin kutsuttu "animaatio". 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). Tarkemmin sanottuna, kuvan haluamme olla animoituja pitäisi olla suurempi z-index kuin taustakuvan alla (se on kuin kanssa kerrosten Photoshop). In order to animate the background image we need some javascript work to be done. Jotta animoida taustakuvan tarvitsemme joitakin javascript tehtävää. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Tietenkin, koska suuri ihailija jQuery, olen käyttänyt jQuery tehdä kaikki animaatio kamaa.

Here's the script I've come up with: Here's the script Olen keksiä:

 (function($){ (function ($) (
            $.fn.enliven = function(options) { $. fn.enliven = function (options) (
                var defaults = { var defaults = (
                    bgImage: '', bgimage:'',
                    duration:3000 kesto: 3000
                }; );
                var options = $.extend(defaults, options); var options = $. laajentamaan (defaults, vaihtoehdot);
                var imH=this.attr("height"), var imH = this.attr ( "korkeus"),
                imW=this.attr("width"); imW = this.attr ( "width");
                this.wrap(' this.wrap ( '

'); ');
                this.css("position","absolute"); this.css ( "kanta", "ehdoton");
                $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + "Jatka"). append ( "

'); ');
                var var
                maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG "+ this.attr (" className ")). attr ( 'clientWidth')-this.attr (leveys)) / 2,
                maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG "+ this.attr (" className ")). attr ( 'clientHeight')-this.attr (korkeus)) / 2;
                function getrand() { toiminto 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) { toiminto 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; jos (newLeft> 0) newLeft = 0;
                    else if(newLeft<-maxLeft)                         newLeft=-maxLeft+1;                     if(newTop>0) newTop=0; else if (newLeft <-maxLeft) newLeft =- maxLeft +1, jos (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 ")). animoinnin ((vasemmalla: newLeft +" px ", top: newTop +" px "), defaults.duration," lineaarinen ", function () (randimate (obj );));
                } )
                return this.each(function(){ return this.each (function () (
                    randimate($(this)); randimate ($ (tästä));
                }); ));
            }; );
        })(jQuery); )) (jQuery); 

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Edellä oleva koodi toimii plugin jQuery, joten se olisi sisällytettävä sivun jälkeen sisällyttäminen jQuery. In order to animate an image, you should use this code: Jotta animoida kuvan, sinun tulisi käyttää tätä koodia:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). elävöittää ((bgimage: ". / path_to_background_image.png", kesto: 1000)); / / kesto on aika kerran tausta animaatio 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Here's crazy esimerkki 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 Tässä toinen kuin crazy Esimerkki 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 Jos pidät ajatusta ja haluavat enemmän ominaisuuksia, pisara minulle rivin kommentti, ja yritän parantaa koodin ja lisää ominaisuuksia

Related posts: Liittyvien virkojen:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Mitä jos jQuery animaatio ei palo / alku?
2. JavaScript: Get anchor from URL JavaScript: Hanki ankkuri URL-osoitteesta
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Miten saada indeksi (asema ryhmä) objektin kanssa jQuery?
4. Javascript: How to validate email address with JavaScript? Javascript: Miten vahvistaa sähköpostiosoitteesi JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Lähetä toimivat parametri toisen toiminnon (kutsuja)