JavaScript: GIFless animation. JavaScript: GIFless Animation. Animate images,logos with jQuery Animieren von Bildern, Logos mit jQuery

Posted on 23. Gesendet am 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Juli 2009 von Dragos in Coding, Design, JavaScript und 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). Nachdem ich einige Zeit mit der Position relativ und absolut, ich habe ein bemerkte er eine große Aspekt des PNG-Bildformat (wahrscheinlich GIF-Bilder sind auch gut, aber da wir versuchen, eine GIFless Animation zu erstellen, werde ich nicht verwenden, keine GIF-Bilder in diesem Tutorial).

So here's aa PNG (transparent text), with the name of this website: So here's aa PNG (transparent Text), mit dem Namen der Website:

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Der Trick der Animation Bilder, ohne die Notwendigkeit der Verwendung des GIF-Bild-Format verfügt, folgen, werden als:

We have an image with transparent text written on it. Wir haben ein Bild mit transparenten Text geschrieben. 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”. Um eine transparente Text zu animieren, müssen wir ein Hintergrundbild unter dem eigentlichen Bild setzen und diesem Hintergrund Bild zu bewegen, um eine so genannte "Animation" zu schaffen. 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). Um genauer zu sein, das wollen wir animiert werden sollten einen höheren z-index als der Hintergrund Bild unten haben sie (die Arbeit mit Ebenen in Photoshop). In order to animate the background image we need some javascript work to be done. Um das Hintergrundbild zu animieren, benötigen wir einige Javascript zu tun. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Natürlich, wie ein großer Fan von jQuery habe, habe ich jQuery für alle die Animation Sachen.

Here's the script I've come up with: Hier ist das Skript Ich komme mit:

(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 (options) (var defaults = (bgimage:'', Dauer: 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 MAXlinks =($('. lbg + 'this.attr ( "className")). attr (' clientWidth ')-this.attr (' width ')) / 2, maxTop =($('. lbg '+ this.attr ( "className")). attr (' clientHeight ')-this.attr (' height ')) / 2; getrand function () (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 <-MAXlinks) newLeft MAXlinks =- 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);));) Rückkehr 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. Der obige Code funktioniert als Plugin von jQuery, so dass es in die Seite aufgenommen werden sollten, nachdem die Aufnahme von jQuery. In order to animate an image, you should use this code: Um ein Bild zu animieren, sollten Sie diesen Code verwenden:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). beleben ((bgimage: ". / path_to_background_image.png", Dauer: 1000)); / / Dauer ist die Zeit der Zeit ein Hintergrund-Animation 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Here's a crazy Beispiel 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 Hier ist eine andere nicht verrückt Beispiel 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 Wenn Ihnen die Idee und wollen mehr Funktionen, drop me a line in einem Kommentar, und ich werde versuchen, den Code zu verbessern und weitere Features hinzufügen

Related posts: In Verbindung stehende Pfosten:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Was passiert, wenn jQuery Animation nicht Feuer / start?
2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Wie in den Index zu erhalten (Position innerhalb einer Gruppe) eines Objekts mit jQuery?
3. JavaScript: Get anchor from URL JavaScript: Get Anker von URL
4. Javascript: How to validate email address with JavaScript? Javascript: Wie für die Validierung der E-Mail-Adresse mit JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Send-Funktion als Parameter an eine andere Funktion (Rückrufe)