fill animation using CSS or Javascript

css, javascript

Solution

Here is a way in Pure JavaScript. I had fun with CSS styling.

Live Demo(with text)

Live Demo (with images)

Image animation

HTML

<div>
    <img id="black" src="http://www.ratemotorcycle.com/image1/5/53/kawasaki-ninja-zx10r-2013.jpg" />
    <img id="red" src="http://imageshack.us/a/img39/3517/13kawasakizx10r1.jpg" />
</div>

CSS

#black {
    /* Added the position and the z-index to ensure images overlay correctly */
    position:absolute;
    z-index:2;

    /* styling fun */
    color:black;
    font-weight:bold;
    font-size:2em;

    /* default width */
    width:768px;
}
#red {
    /* Position and z-index let us overlay the #black and #red elements*/
    position:absolute;
    z-index:10;

    /* This is to put the element directly over the #black element 
       (compensating the margin/padding of the #black element */
    left:8px;

    /* We make the initial width 0px and hide the overflow. */
    width:0px;
    overflow:hidden;

    /* Fun styling */
    font-weight:bold;
    font-size:2em;
    color:red;
}

JavaScript

var red = document.getElementById('red');

red.style.width = "0px";
/* set the height so the image does not "scale" */
red.style.height = "1024px";
var animation = setInterval(function () {

    if (parseInt(red.style.width, 10) == 768) clearInterval(animation);
    red.style.width = parseInt(red.style.width, 10) + 2 + "px";
}, 10);

Text animation

HTML

<div> 
    <span id="black">LOGO</span>
    <span id="red">LOGO</span>
</div>

CSS

#black{
    /* Fun styling */
    color:black;
    font-weight:bold;
    font-size:2em;
}
#red {
    /* Position and z-index lets us overlay the #black and #red elements*/
    position:absolute;
    z-index:10;

    /* This is to put the element directly over the #black element 
       (compensating the margin/padding of the #black element */
    left:8px;

    /* We make the initial width 0px and hide the overflow. */
    width:0px;
    overflow:hidden;

    /* Fun styling */
    font-weight:bold;
    font-size:2em;
    color:red;
}

JavaScript

/* On window load (when the page is loaded) */
window.onload = function(){
    /* We select our #red element */
    var red = document.getElementById('red');

    /* Set the width of #red to 0px */
    red.style.width = "0px";

    /* Create an action that will execute every 50ms */
    var animation = setInterval(function(){

        /* If the element is at the desired width, we clear the animation loop */
        if(red.style.width == "91px")
            clearInterval(animation);

        /* Otherwise, we set the width+=1, ensuring to get the numeric value of it only */
        red.style.width = parseInt(red.style.width,10)+1 +"px";
    },50);
};

jQuery alternative

$('#red').css('width','0px');
$('#red').animate({'width':'91px'},4500);

JavaScript vs jQuery

JSPerf results

After an unofficial test battery, the jQuery animation for this purpose would be ran 85% slower than its pure JavaScript counterpart. This is a huge performance difference.

Problem

Original source

Related problems

• Finding element's position relative to the document