fill animation using CSS or Javascript

Question

I was just wondering if it is possible to create a fill animation using CSS or javascript?

basically I want to create a fill animation like the one shown in the image bellow:

http://i40.tinypic.com/eit6ia.png

the red being the fill and the black is being empty.

This is my code that Jeff posted for images but it doesn't work for some reason! am i missing something??

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#black{
    position:absolute;
    z-index:2;
    color:black;
    font-weight:bold;
    font-size:2em;
    width:768px;
}
#red {
    position:absolute;
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
}
</style>

<script language="javascript">
var red = document.getElementById('red');

red.style.width = "0px";
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);
</script>


</head>

<body>
<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>
</body>
</html>

Does it have to be with text? Might know a way – Chris Laarman Jul 19 '13 at 12:26 — Chris Laarman, Jul 19 '13 at 12:26
@ChrisLaarman, No, I actually need it to be with an image. – Jessy Jordan Jul 19 '13 at 12:33 — Jessy Jordan, Jul 19 '13 at 12:33

Chris Laarman · Answer 1 · 2013-07-19T12:49:55.860

3

I put 2 divs over eachother with the same text, and animate 1 of them on click.

HTML

<div class="red">Text</div>
<div class="black">Text</div>

CSS

div {
    position: absolute;
    top: 0px;
    left: 0px;
    font-size: 48px;
    font-family: arial;
    font-weight: bold;
    width: 150px;
    overflow: hidden;
    cursor: pointer;
}
div.red { color: red;}

Javascript

$(document).ready(function() {
    $("div.black").animate({
        'width': 0
    }, 2000);
});

http://jsfiddle.net/d8LAn/3/

edited Jul 19 '13 at 12:49

answered Jul 19 '13 at 12:32

Chris Laarman

1,559
12
25

can this be done without clicking? i.e as soon as the page loads? and also, can the duration be slower? – Jessy Jordan Jul 19 '13 at 12:36

Jeff Noel · Accepted Answer · 2013-07-19T13:30:34.517

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.

Thanks Jeff. I have tried to apply your javascript solution to two images (one logo in red and one logo in black). both of these two images are placed inside of two separate div's called preloader and preloader2. preloader2 is holding the logo in red. but unfortunately it doesn't work and it only shows the black logo (preloader div)! is your solution only applies to and fonts/texts? — Jessy Jordan, Jul 19 '13 at 13:16
@JessyJordan Here is [how it's done with images](http://jsfiddle.net/fHcqH/3/). Simply specify the default `height` of the element in JavaScript so that the image appears horizontally instead of scaling. You also need to set the first image with a `position:absolute` too, just set a lower `z-index` to it if necessary ( as I did in the CSS part). **Edit** I added the way I did it with images to my answer. — Jeff Noel, Jul 19 '13 at 13:26

Patsy Issa · Answer 3 · 2013-07-19T12:58:36.730

2

One way to do so would be to position 2 images one that is black and one that is red(on top) set the width of the red one to 0 and using jquery like so :

$('#redone').animate({
width: 'widthofyourelement'
}, 600)

This would give it the effect of "filling", if you wish to fill it differently i suggest checking out rhaphael.js and reading up on SVG,

Css only solution

edited Jul 19 '13 at 12:58

answered Jul 19 '13 at 12:27

Patsy Issa

11,113
4
55
74

oh darn typo, let me just fix that – Patsy Issa Jul 19 '13 at 12:30
That is actually what I am looking for but is there any way I can do this without jquery? something like javascript ? – Jessy Jordan Jul 19 '13 at 12:34
1

@JessyJordan Jeff got the pure js, here's a css solution if you're also interested http://jsfiddle.net/YQA69/ – Patsy Issa Jul 19 '13 at 12:57

score 0 · Answer 4 · answered Jul 19 '13 at 13:44

You can do it this way with plain javascript:

function animate() {
    var logo = document.getElementById('logo');
    logo.style.color = 'blue';
    logo.style.backgroundColor = '#ff8';
    // http://stackoverflow.com/questions/5598743/finding-elements-position-relative-to-the-document
    var elem = logo;
    var offset = { top: 0, left: 0 };
    do {
        if (!isNaN(elem.offsetLeft)) {
            offset.top += elem.offsetTop;
            offset.left += elem.offsetLeft;
        }
    } while (null !== (elem = elem.offsetParent));
    var c = logo.cloneNode(true);
    c.id = '';
    c.style.position = 'absolute';
    c.style.top = offset.top + 'px';
    c.style.left = offset.left + 'px';
    c.style.color = 'red';
    c.style.backgroundColor = '#8ff';
    c.style.width = 0;
    c.style.height = logo.clientHeight + 'px';
    document.body.appendChild(c);
    //logo.parentNode.insertBefore(c, logo.nextSibling); //(alternative)
    var maxw = logo.clientWidth,
        currw = 0;
    var duration = 1000; //miliseconds
    var iv = setInterval(function () {
        currw += 1;
        if (currw > maxw) {
            clearInterval(iv);
        }
        c.style.width = currw + 'px';
    }, (duration/maxw));
}

http://jsfiddle.net/SkfHx/ (full code)
http://jsfiddle.net/SkfHx/show (result, works well in IE7+ and all other browsers)

UserOnE · Answer 5 · 2013-11-01T15:47:06.823

Only With CSS : IN HTML :-

<h1>Online<a><span>Online</span></a></h1>

And IN CSS : -

h1 {
    position: absolute;
    top: 0;
    left: 0;
    height: 100px;
    line-height:100px;
    width: 280px;
    text-align: center;
    font-size:70px;
    color:#fff;
   background:rgba(171,169,170,0.8);
    padding:0px; 
    margin:0px;
    cursor:pointer;

}
     h1 a {
        position: absolute;
        top: 0;
        left: 0;
        height: 0px;
        width: 0px;
        text-align: center;
        font-size: 70px;
        color:#fff;
        overflow:hidden;
        padding: 0px;
        margin: 0px;
 -webkit-transition:     all 400ms cubic-bezier(0.785, 0.135, 0.15, 0.86);
    }
   h1:hover a{
    height: 100px;
    width: 280px;
 -webkit-transition:     all 400ms cubic-bezier(0.785, 0.135, 0.15, 0.86);

    }
     h1 a span { position: absolute;
        top: 0;
        left: 0;
         font-size: 70px; height: 100px;
    width: 280px;
    color:rgba(0, 148, 255, 0.84);
    cursor:pointer;
    }

fill animation using CSS or Javascript

5 Answers5

Live Demo(with text)

Live Demo (with images)

Image animation

HTML

CSS

JavaScript

Text animation

HTML

CSS

JavaScript

jQuery alternative

JavaScript vs jQuery

Linked