JavaScript: GIFless animation. Animate images,logos with jQuery

Posted on 23. Jul, 2009 by 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).

So here’s a a PNG (transparent text), with the name of this website:

Transparent Logo

The trick of animating images, without the need of using the GIF image format features, are as follow:

We have an image with transparent text written on it. 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”. 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). In order to animate the background image we need some javascript work to be done. Of course, as a big fan of jQuery, I’ve used jQuery to do all the animation stuff.

Here’s the script I’ve come up with:

(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);

The code above works as a plugin of jQuery, so it should be included in the page, after the inclusion of jQuery. In order to animate an image, you should use this code:

$('image_selector').enliven({bgImage:"./path_to_background_image.png",duration:1000}); //duration is the time of one time background animation

Here’s a crazy example 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

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

                    
                    

Related posts:

1. JavaScript: What if jQuery animation doesn’t fire/start?
2. JavaScript: Get anchor from URL
3. JavaScript: How to get the index (position within a group) of an object with jQuery?
4. Javascript: How to validate email address with JavaScript?
5. JavaScript: Send function as a parameter to another function (callbacks)