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

Posted on 23. Skrevet den 23.. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Jul 2009 av Dragos i Coding, 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). Etter å ha spilt en stund med posisjon relativt og absolutt, jeg har merket en stor del av PNG-bildeformatet (sannsynligvis gif bilder er også bra, men siden vi prøver å skape en GIFless animasjon, vil jeg ikke bruke noen gif-bilder i denne opplæringen).

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

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Trikset med animert bilder, uten behov for å bruke GIF bildeformatet funksjoner, er som følger:

We have an image with transparent text written on it. Vi har et bilde med gjennomsiktig tekst skrevet på den. 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”. For å animere gjennomsiktig teksten, må vi sette et bakgrunnsbilde under selve bildet og flytte denne bakgrunnsbilde, for å lage en såkalt "animasjon". 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). For å være mer presis, det bildet vi ønsker å være animert bør ha en høyere z-indeks enn bakgrunnsbilde under det (det er å jobbe med lag i Photoshop). In order to animate the background image we need some javascript work to be done. For å animere bakgrunnsbildet vi trenger noe javascript som må gjøres. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Selvfølgelig som en stor fan av jQuery, jeg har brukt jQuery å gjøre all animasjonen ting.

Here's the script I've come up with: Her er scriptet jeg har kommet opp 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); (funksjon ($) ($. fn.enliven = function (options) (var mislighold = (bgImage:'', varighet: 3000); var valg = $. forlenger (mislighold, options); var imH = this.attr ( "height"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "posisjon", "absolutte"); $('#'+ this.attr ( "className" ) + 'Cont'). føyer ( ''); var maxLeft =($('. LBG '+ this.attr ( "className")). attr (' clientWidth ')-this.attr (' width ')) / 2, maxTop =($('. LBG '+ this.attr ( "className")). attr (' clientHeight ')-this.attr (' høyde ')) / 2; funksjon getrand () (var nr = Math.floor (Math.random () * 2); tilbake 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", øverst: newTop + "px"), defaults.duration, "lineære", 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. Koden ovenfor fungerer som en plugin av jQuery, så det bør inkluderes i siden, etter at inkludering av jQuery. In order to animate an image, you should use this code: For å animere et bilde, bør du bruke denne koden:

 $('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", varighet: 1000)); / / varighet er tid for en tid bakgrunn animasjon 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Her er en sprø 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 annen ikke-gale 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 liker ideen og ønsker flere funksjoner, send meg en linje i en kommentar og jeg skal prøve å forbedre koden og legge til flere funksjoner

Related posts: Relaterte artikler:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Hva hvis jQuery animasjon ikke brann / start?
2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Hvordan få indeksen (posisjon innenfor en gruppe) av et objekt med jQuery?
3. Javascript: How to validate email address with JavaScript? Javascript: Hvordan kan validere e-postadressen med JavaScript?
4. JavaScript: Get anchor from URL JavaScript: Få anker fra URL
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Send fungere som en parameter til en annen funksjon (tilbakeanrop)