JavaScript: GIFless animation. JavaScript: GIFless animatie. Animate images,logos with jQuery Animate beelden, logo's met jQuery
Posted on 23. Geplaatst op 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Juli, 2009 door Dragos in Coding, Design, JavaScript & 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). Na het spelen enige tijd met het standpunt van relatieve en absolute, heb ik gemerkt een een groot aspect van de png image-formaat (gif afbeeldingen waarschijnlijk ook goed zijn, maar omdat we proberen een GIFless animatie maken, zal ik geen gebruik van gif-afbeeldingen in deze tutorial).
So here's aa PNG (transparent text), with the name of this website: Dus hier is aa PNG (transparante tekst), met de naam van deze website:
Transparent Logo Transparent Logo
The trick of animating images, without the need of using the GIF image format features, are as follow: De truc van animeren beelden, zonder de noodzaak van het gebruik van GIF-formaat kenmerken, zijn als volgt:
We have an image with transparent text written on it. We hebben een afbeelding met transparante tekst geschreven. 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”. Te animeren de transparante tekst, moeten we een achtergrondafbeelding plaats onder het werkelijke beeld en deze achtergrond afbeelding te bewegen, om een zogenaamde "animatie te creëren". 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). Om meer precies te zijn, het beeld dat we willen zijn geanimeerd moeten een hogere z-index dan de achtergrond afbeelding hieronder is (het is zoals het werken met lagen in Photoshop). In order to animate the background image we need some javascript work to be done. Om te animeren de achtergrond afbeelding hebben we wat uitgeschakeld werk te doen. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Natuurlijk, als een grote fan van jQuery, heb ik jQuery gebruikt om alles in de animatie stuff.
Here's the script I've come up with: Hier is het script Ik kom met:
(function($){ (function ($) ( $.fn.enliven = function(options) { $. fn.enliven = function (options) ( var defaults = { var = (defaults bgImage: '', bgImage:'', duration:3000 duur: 3000 }; ); var options = $.extend(defaults, options); var options = $. uitbreiden (standaard, opties); var imH=this.attr("height"), var = IMH this.attr ( "height"), imW=this.attr("width"); IMW = this.attr ( "width"); this.wrap(' this.wrap ( ' '); '); this.css("position","absolute"); this.css ( "positie", "absolute"); $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'Cont'). append ( ' '); '); var var maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, maxLeft =($('. LBG '+ this.attr ( "className")). attr (' clientWidth ')-this.attr (' width ')) / 2, maxTop=($('.lbg'+this.attr("className")).attr('clientHeight')-this.attr('height'))/2; maxTop =($('. LBG '+ this.attr ( "className")). attr (' clientHeight ')-this.attr (' height ')) / 2; function getrand() { getrand function () ( var nr=Math.floor(Math.random()*2); var nr = Math.floor (Math.random () * 2); return nr==0?-1:1; terugkeer nr == 0? -1:1; } ) function randimate(obj) { functie randimate (obj) ( var ph=Math.floor(imH*20/100),pw=Math.floor(imW*20/100); 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(); 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(); NewTop =$(". LBG "+ obj.attr (" className ")). attr (" offsetTop ") + Math.floor (Math.random () * ph) * getrand (); if(newLeft>0) newLeft=0; if (newLeft> 0) newLeft = 0; else if(newLeft<-maxLeft) newLeft=-maxLeft+1; if(newTop>0) newTop=0; else if (newLeft <-maxLeft) newLeft =- maxLeft +1; if (NewTop> 0) NewTop = 0; else if(newTop<-maxTop) else if (NewTop <-maxTop) newTop=-maxTop+1; NewTop =- maxTop +1; $('.lbg'+obj.attr("className")).animate({left:newLeft+"px",top:newTop+"px"},defaults.duration,"linear",function(){ randimate(obj); }); $ ( '. LBG' + obj.attr ( "className")). animate ((left: newLeft + "px", boven: NewTop + "px"), defaults.duration, "lineair", function () (randimate (obj );)); } ) return this.each(function(){ return this.each (function () ( randimate($(this)); randimate ($ (this)); }); )); }; ); })(jQuery); )) (jQuery);
The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. De bovenstaande code werkt als een plugin van jQuery, dus het moet worden opgenomen in de pagina, na de opname van jQuery. In order to animate an image, you should use this code: Om te animeren een afbeelding, moet u deze code:
$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). verlevendigen ((bgImage: ". / path_to_background_image.png", duur: 1000)); / / duur is de tijd van een keer achtergrond animatie Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Hier is een gek voorbeeld 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 is nog een niet-gek voorbeeld 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 Als je van het idee en wil je meer functies, stuur me een lijn in een commentaar en ik zal proberen om de code te verbeteren en meer functies toe te voegen 
Related posts: Gerelateerde berichten:
- JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Wat als jQuery animatie niet brand / start?
- JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Hoe krijg ik de index (positie binnen een groep) van een object met jQuery?
- JavaScript: Get anchor from URL JavaScript: Get anker van URL
- Javascript: How to validate email address with JavaScript? Javascript: Hoe te valideren e-mailadres met JavaScript?
- JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Stuur functie als parameter aan een andere functie (callbacks)
