Geek asks and answers

How to create a "highlight" effect in CSS3 / Javascript?

I have a range of text that when clicked will be highlighted by changing its background color. I would like to animate the selection, so that the background color gradually changes from left to right, as if someone were really highlighting the text. Any thoughts on how this would be possible with CSS3 and / or Javascript / jQuery?

+3
source share
2 answers

If you are fine with some CSS3 features, you can use transitions, gradients and background-size:

.highlightable {
    background-size: 0 100%;
    background-repeat: no-repeat;
    -webkit-transition: background-size 0.5s ease-out;
    -moz-transition: background-size 0.5s ease-out;
    -ms-transition: background-size 0.5s ease-out;
    -o-transition: background-size 0.5s ease-out;
    transition: background-size 0.5s ease-out;
}

.highlightable.highlight {
    background-image: -webkit-linear-gradient(yellow, yellow);
    background-image: -moz-linear-gradient(yellow, yellow);
    background-image: -ms-linear-gradient(yellow, yellow);
    background-image: -o-linear-gradient(yellow, yellow);
    background-image: linear-gradient(yellow, yellow);
    background-size: 100% 100%;
}​

Here is a demo.

+7
source

A lot of JavaScript libraries make this pretty simple, for example, my favorite: YUI

, ; setTimeout() ; .

setTimeout("document.getElementById('mySpan').style.backgroundColor = myColors[i]; i++;", 50);
0

More articles:


All Articles