CODEWITHSUNDEEP
javascripthtmlcssanimation
UID
UID

Reputation: 4514

Text Color Masking with Animation using CSS or JS

I want to show the text text masking effect with animation

Here is my fiddle for what I am trying to achieve: http://jsfiddle.net/qTWTH/

This is not working completely, the effect which I am getting for "Waiting" is what I want for complete text, where as right now, after "Waiting" the red text pause and change the color of whole work all together.

Also how to hide the full "Red text", it should only be visible while masking.

Code: HTML

<div>
    <span id="black">Waiting for the task!</span>
    <span id="red">Waiting for the task!</span>
</div>

CSS

#black {
    color:black;
    font-weight:bold;
    font-size:2em;
}
#red {
    position:absolute;
    z-index:10;
    left:8px;
    width:0px;
    overflow:hidden;
    font-weight:bold;
    font-size:2em;
    color:red;
}

JS

var red = document.getElementById('red');
var black = document.getElementById('black');
red.style.width = "0px";
var animation = setInterval(function () {
    console.log(red.style.width);
    if (red.style.width == "290px") clearInterval(animation);
    red.style.width = parseInt(red.style.width, 10) + 1 + "px";
}, 50);

Let me know if you need any other information.

Please suggest.

Upvotes: 0

Views: 328

Answers (1)

Alex W
Alex W

Reputation: 38213

Add this CSS to your #red selector properties:

white-space: nowrap;

http://jsfiddle.net/qTWTH/1/

Upvotes: 3

Related Questions