JavaScript: GIFless animation. JavaScript: GIFless animation. Animate images,logos with jQuery Animer des images, des logos avec jQuery

Posted on 23. Posté le 23. Jul, 2009 by Dragos in Coding , Design , JavaScript & Ajax Jul, 2009 par Dragos en Coding, Design, Javascript et 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). Après avoir joué quelque temps avec la position relative et absolue, j'ai remarqué un grand un aspect du format d'image PNG (images GIF sont probablement aussi bon, mais puisque nous essayons de créer une animation GIFless, je ne vais pas utiliser les images GIF Dans ce tutoriel).

So here's aa PNG (transparent text), with the name of this website: So here's PNG AA (texte transparent), avec le nom de ce site:

Transparent Logo Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow: L'astuce d'animer des images, sans qu'il soit nécessaire d'utiliser les éléments d'une image en format GIF, sont les suivantes:

We have an image with transparent text written on it. Nous avons une image transparente avec un texte écrit à ce sujet. 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”. Pour animer le texte transparent, nous avons besoin de placer une image de fond sous l'image réelle et déplacer cette image de fond, afin de créer un soi-disant «l'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). Pour être plus précis, l'image que nous voulons être animé devrait avoir un z-index plus élevé que l'image de fond en dessous de lui (c'est comme travailler avec les calques dans Photoshop). In order to animate the background image we need some javascript work to be done. Afin d'animer l'image de fond nous avons besoin de quelques travaux javascript à faire. Of course, as a big fan of jQuery, I've used jQuery to do all the animation stuff. Bien sûr, comme un grand fan de jQuery, j'ai utilisé JQuery pour faire tous les trucs d'animation.

Here's the script I've come up with: Voici le scénario que je viens avec:

 (function($){ (function ($) (
            $.fn.enliven = function(options) { $. fn.enliven = function (options) (
                var defaults = { var defaults = (
                    bgImage: '', bgimage:'',
                    duration:3000 Durée: 3000
                }; );
                var options = $.extend(defaults, options); var options = $. étendre (par défaut, options);
                var imH=this.attr("height"), imh var = this.attr ( "height"),
                imW=this.attr("width"); IMW = this.attr ( "width");
                this.wrap(' this.wrap ( '

'); ');
                this.css("position","absolute"); this.css ( "position", "absolute");
                $('#'+this.attr("className")+'Cont').append(' $('#'+ this.attr ( "className") + 'Cont'). append ( '

'); ');
                var var
                maxLeft=($('.lbg'+this.attr("className")).attr('clientWidth')-this.attr('width'))/2, LBG =($('. maxLeft '+ 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; retour nr == 0? -1:1;
                } )
                function randimate(obj) { fonction 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(); LBG =$(". newLeft "+ 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", en haut: newTop + "px"), defaults.duration, "linéaire", function () (randimate (obj );));
                } )
                return this.each(function(){ retour 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. Le code ci-dessus fonctionne comme un plugin de jQuery, il devrait donc être inclus dans la page, après l'intégration de jQuery. In order to animate an image, you should use this code: Afin d'animer une image, vous devez utiliser ce code:

 $('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation $ ( 'image_selector'). égayer ((bgimage: ". / path_to_background_image.png", durée: 1000)); / / durée est le temps d'une animation d'arrière-plan du temps 

Here's a crazy example 1: http://iwebdevel.com/wp-content/uploads/2009/07/logo.php Voici un exemple crazy 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 Voici un autre exemple non crazy 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 Si vous aimez l'idée et que vous souhaitez plus de fonctionnalités, envoyez-moi une ligne dans un commentaire et je vais essayer d'améliorer le code et ajouter plus de fonctionnalités

Related posts: Related posts:

1. JavaScript: What if jQuery animation doesn't fire/start? JavaScript: Que faire si jQuery animation ne se déclenche pas / start?
2. JavaScript: Get anchor from URL JavaScript: Obtenir l'ancre dans l'url
3. JavaScript: How to get the index (position within a group) of an object with jQuery? JavaScript: Comment obtenir l'index (la position dans un groupe) d'un objet avec jQuery?
4. Javascript: How to validate email address with JavaScript? Javascript: Comment faire pour valider l'adresse e-mail avec JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks) JavaScript: Envoyer fonction comme paramètre à une autre fonction (rappels)