CODEWITHSUNDEEP
javascriptjquerycssjquery-effects
user2398029
user2398029

Reputation: 6937

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

I have a span of text, which when clicked gets highlighted by changing its background color. I would like to animate the highlighting, so that the background color changes progressively from left to right, as if someone was actually highlighting the text. Any thoughts on how that would be achievable with CSS3 and/or Javascript/jQuery?

Upvotes: 3

Views: 967

Answers (2)

Reece
Reece

Reputation: 3

Lots of JavaScript libraries make this pretty easy for example my favourite: YUI

Otherwise without a library I would set an array with hexadecimal intermediary colour values that you want you background to have at each time slice; and use the setTimeout() method to change the background colour several times in quick succession; e.g.

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

Upvotes: 0

Ry-
Ry-

Reputation: 224912

If you're okay with some CSS3-only 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's a demo.

Upvotes: 7

Related Questions