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 FRISSÍTÉSEK VIA RSS | E-mail Get updates via feedburner Get updates via twitter
Home / Coding / Design / JavaScript & Ajax / JavaScript: GIFless animatio… Home / Coding / Design / JavaScript és Ajax / JavaScript: GIFless animatio ...

JavaScript: GIFless animation. A JavaScript: GIFless animáció. Animate images,logos with jQuery Animálás képeket, logókat és jQuery

Posted on 23. Posted on 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Július, 2009 Dragos ben Kódolás, Design, JavaScript és 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). Lejátszása után egy ideig a helyzetben abszolút és relatív értelemben, vettem észre az egyik nagy eleme a PNG képformátumot (talán gif képeket is jók, de mivel mi próbálunk létrehozni GIFless animációt, én nem használ semmilyen gif képeket ez a bemutató).

So here's aa PNG (transparent text), with the name of this website: Tehát itt van aa PNG (átlátszó szöveget), a neve ennek a honlapon:

Transparent Logo

Transparent Logo Átlátszó Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: A trükk az animált képek, anélkül, hogy használata a GIF képformátum funkciók a következők:

We have an image with transparent text written on it. Van egy kép átlátszó szöveget írt rá. 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”. Animálni, hogy az átlátszó szöveget, meg kell helyezni háttérkép alatt a tényleges képet, és mozgassa a háttérképet, annak érdekében, hogy hozzon létre egy úgynevezett "animáció". 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). Pontosabban, a kép azt akarjuk, hogy animációs kell egy z-index magasabb, mint a háttérkép alatta (ez olyan, mint a dolgozó rétegek a Photoshop). In order to animate the background image we need some javascript work to be done. Annak érdekében, hogy animálását háttérkép szükségünk van némi javascript tennivaló. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Természetesen, mivel nagy rajongója a jQuery, én is használtam jQuery hogy tegyenek meg mindent az animációs dolgokat.

Here's the script I've come up with: Itt van a script jöttem fel: 

(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:'', időtartam: 3000); var options = $. kiterjesztése (defaults, options); var IMH this.attr = ( "height"), imW = this.attr ( "width"); this.wrap ( ''); this.css ( "hely", "abszolút"); $('#'+ 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, 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 <-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, "lineáris", 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. A fenti kóddal működik, mint egy dugó a jQuery, ezért be kell vonni az oldalon, felvétele után think. In order to animate an image, you should use this code: Annak érdekében, hogy animálni egy képet, akkor használd ezt a kódot: 

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector "). felvidít ((bgImage:". / path_to_background_image.png ", duration: 1000)); / / időtartam az az idő, az egy időben háttér animáció

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Itt egy hülye példa 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 Itt egy újabb, nem őrült példa 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 Ha tetszik az ötlet, és több szolgáltatást szeretne, dobj meg egy sort egy megjegyzést, és megpróbálom javítani a kódot, és adjunk hozzá több szolgáltatást ;)

Translate this post Translate this post


Related posts: Related posts:

  1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: mi van, ha jQuery animáció nem villan / start?
  2. JavaScript: Get anchor from URL JavaScript: Get horgony az URL-ből
  3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Hogyan juthat az index (position csoportján belül) egy objektum jQuery?
  4. Javascript: How to validate email address with JavaScript? Javascript: How to validate e-mail címét a JavaScript?
  5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Send függvény paraméterként egy másik funkció (visszahívások)

    blog comments powered by Disqus iPhone Disqus szerint