Home > Web Front-end > JS Tutorial > Karaoke subtitle effect_javascript skills

Karaoke subtitle effect_javascript skills

WBOY
Release: 2016-05-16 19:26:57
Original
1827 people have browsed it

The subtitles in karaoke will gradually light up as the song progresses. Since the subtitles do not light up one by one but gradually transition, when we implement this effect on the web page, we must use two layers to achieve it. The text is the same, the color is different, the bottom layer remains unchanged, and the upper layer is gradually widened to cover the lower layer, this effect is achieved. This principle is also used to achieve this effect in Flash. This article gives basic examples to provide some inspiration.
The key point is: the text size and line height of the two layers are the same, and reasonable position, top, overflow, width style attributes and nowrap HTML attributes are set for the second layer.
Note that different browsers may not be able to achieve this effect due to different interpretations of CSS and lack of support for certain attributes. Please check the example in IE.

Related labels:
ok
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template