This is a translated page. The original can be found here: http://iwebdevel.com/2009/07/23/javascript-gifless-animation-animate-imageslogos-with-jquery/
UPDATES VIA RSS | Email Opdateringer via RSS | E-mail Get updates via feedburner Get updates via twitter
Home / Coding / Design / JavaScript & Ajax / JavaScript: GIFless animatio… Hjem / Kodning / Design / JavaScript & Ajax / JavaScript: GIFless animatio ...

JavaScript: GIFless animation. JavaScript: GIFless animation. Animate images,logos with jQuery Animere billeder, logoer med jQuery

Posted on 23. Sendt den 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Juli, 2009 af Dragos i Kodning, Design, JavaScript og 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). Efter at have spillet et stykke tid med placering relativ og absolut, jeg har bemærket en stor del af png billedformat (sandsynligvis gif-billeder er også gode, men da vi forsøger at skabe en GIFless animation, vil jeg ikke bruge en gif-billeder i dette selvstudium).

So here's aa PNG (transparent text), with the name of this website: Så her er aa PNG (gennemsigtig tekst), med navnet på denne hjemmeside:

Transparent Logo

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Tricket med at animere billeder, uden at det er nødvendigt at bruge GIF-billedformatet funktioner, er følgende:

We have an image with transparent text written on it. Vi har et billede med gennemsigtig tekst skrevet på det. 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”. At animere gennemsigtig tekst, vi har brug for at placere et baggrundsbillede under det faktiske billede og flytte denne baggrund billede, med henblik på at skabe en såkaldt "animation". 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). At være mere præcis, det billede, vi ønsker at være animerede, bør have en højere z-index end baggrundsbilledet nedenfor (det er som at arbejde med lag i Photoshop). In order to animate the background image we need some javascript work to be done. For at animere baggrundsbilledet vi brug for nogle javascript arbejde at gøre. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Naturligvis, som en stor fan af jQuery har jeg brugt jQuery til at gøre alle animationen kram.

Here's the script I've come up with: Her er det script jeg har kommet med: 

(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:'', varighed: 3000); var options = $. udvide (standard, optioner); var IMH = this.attr ( "height"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "position", "absolut"); $('#'+ 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; funktion 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 ((venstre: newLeft + "px", top: newTop + "px"), defaults.duration, "lineær", function () (randimate (obj);));) return 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. Ovenstående kode fungerer som et plugin af jQuery, så det bør indgå i den side, efter inddragelse af jQuery. In order to animate an image, you should use this code: For at animere et billede, skal du bruge denne kode: 

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). oplive ((bgImage: ". / path_to_background_image.png", varighed: 1000)); / / varighed er tidspunktet for en gang baggrund animation

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Her er et vanvittigt eksempel 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 Her er en anden ikke-crazy Eksempel 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 Hvis du kan lide idéen og ønsker flere funktioner, drop mig en linje i en kommentar, og jeg vil prøve at forbedre koden og tilføje flere funktioner ;)

Translate this post Oversæt dette indlæg


Related posts: Relaterede stillinger:

  1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Hvad hvis jQuery animationen ikke brand / start?
  2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Sådan får du indekset (position inden for en gruppe) af et objekt med jQuery?
  3. Javascript: How to validate email address with JavaScript? Javascript: Hvordan at validere e-mail-adresse med JavaScript?
  4. JavaScript: Get anchor from URL JavaScript: Få anker fra webadresse
  5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Send fungere som en parameter til en anden funktion (tilbagekald)

    blog comments powered by Disqus blog comments powered by Disqus