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 Ažuriranja putem RSS | E-mail Get updates via feedburner Get updates via twitter
Home / Coding / Design / JavaScript & Ajax / JavaScript: GIFless animatio… Home / Kodiranje / Design / Ajax & JavaScript / JavaScript: GIFless animatio ...

JavaScript: GIFless animation. JavaScript: GIFless animacija. Animate images,logos with jQuery Animate slike, logotipi s jQuery

Posted on 23. Poslano na 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Srp, 2009 by Dragos u kodiranju, dizajn, Ajax & JavaScript

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). Nakon igranja neko vrijeme s položaja relativna i apsolutna, primijetio sam jedan veliki aspekt png format slike (vjerojatno gif slike su također dobri, ali pošto su mi pokušavamo stvoriti GIFless animacija, neću koristiti bilo gif slike In this tutorial).

So here's aa PNG (transparent text), with the name of this website: Na taj način krivovjerje 'aa PNG (transparentno tekst), uz ime ove web stranice:

Transparent Logo

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: Izigrati animiranja slike, bez potrebe za korištenjem značajki GIF format slike, jesu kao što slijedi:

We have an image with transparent text written on it. Imamo slike sa transparentan tekst napisan na njega. 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”. Animirati transparentno teksta, moramo postaviti pozadinsku sliku ispod stvarne slike i premjestiti ovu pozadinsku sliku, kako bi se stvorili tzv "animacija". 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). Točnije, slike želimo biti oživljeni bi trebao imati veći z-index nego pozadinsku sliku ispod njega (to je kao da rade s slojeva u Photoshopu). In order to animate the background image we need some javascript work to be done. Kako bi se animirati pozadinsku sliku trebamo neke JavaScript posla koji treba obaviti. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Naravno, kao veliki fan jQuery, Ive 'iskorišten jQuery učiniti sve animacije stvari.

Here's the script I've come up with: Evo skripta sam došao gore sa: 

(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 (opcija) (var defaults = (bgImage:'', trajanje: 3000); var opcije = $. proširiti (defaults, opcije); var imH = this.attr ( "Visina"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "pozicije", "apsolutno"); $('#'+ this.attr ( "className" ) + 'Nastavi'). append ( ''); var maxLeft =($('. LBG '+ this.attr (className ")). attr (' clientWidth ')-this.attr (' width ')) / 2, maxTop =($('. LBG '+ this.attr (className ")). attr (' clientHeight ')-this.attr (' height ')) / 2; funkcija getrand () (var nr = Math.floor (Math.random () * 2); return br == 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 ")). nadahnjivati ((left: newLeft +" px ", top: newTop +" px "), defaults.duration," linearno ", function () (randimate (obj);));) povratak this.each (function () (randimate ($ (ova));)););)) (jQuery);

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. Kod iznad radi kao plugin za jQuery, tako da bi trebalo biti uključene u stranici, nakon uključivanja jQuery. In order to animate an image, you should use this code: Kako bi se animirati predodžba, trebate koristiti ovaj kod: 

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). oživjeti ((bgImage: ". / path_to_background_image.png", trajanje: 1000)); / / trajanje je vrijeme jedne animacije vremena pozadini

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Evo ludi primjer 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 Evo još jedan ne-ludi primjer 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 Ako vam se sviđa ideja i želite više mogućnosti, ispadne mi linija u komentaru i ja ću pokušati poboljšati broj i dodati više značajki ;)

Translate this post Translate this post


Related posts: Related posts:

  1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Što ako jQuery animacija ne požara / početi?
  2. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Kako biste dobili indeks (poziciju unutar grupe) s jQuery objekt?
  3. Javascript: How to validate email address with JavaScript? Javascript: Kako da biste provjerili valjanost adresa e-pošte s JavaScriptom?
  4. JavaScript: Get anchor from URL JavaScript: Get sidro iz URL-a
  5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Pošaljite funkcija kao parametar za druge funkcije (callbacks)

    blog comments powered by Disqus Blog komentari powered by Disqus