Question

我有<div>文字。

Lorem ipsum dolor sit amet, consectetur adipisicing elit, 
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

我希望此<div>中的文字一次出现在第一页上：

L

Lo

Lor

... and so on, until the full text is visible

可接受的替代方案：一次执行一个单词，以避免由于软连字而导致HTML实体和跳跃单词出现问题。

如果用户点击<div>，则应取消动画并立即显示全文。

简而言之，我想模仿日本式冒险游戏中经常出现的动画。（我认为这有时被称为打字机或电传打字机效果。）这是一个很好的例子：

http://www.youtube.com/watch?feature=player_detailpage&v=SasgN0lim7M#t=418

显然，我可以使用JavaScript编写动画脚本 - 只需设置一个计时器并逐个附加字母（或单词）。

但是现代浏览器中可以用CSS做我需要的吗？（当然，我需要至少使用JS更改onclick中的元素类，但这没关系。）

更新：澄清字符与HTML实体的字母和问题：

我的文字充斥着HTML：

Lo&shy;rem <i>ip&shy;sum</i>.

对于innerHTML逐个字符添加文本的天真方法不起作用：

L

Lo

Lo&

...Doh!

Answer 1

你可以通过一些jQuery实现这一点。

查看我的小提琴：http://jsfiddle.net/kA8G8/7/

HTML

<p class="typewriter">Nullam id dolor id nibh ultricies vehicula ut id elit. Maecenas faucibus mollis interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras justo odio, dapibus ac facilisis in, egestas eget quam.</p>

JS

var text = $('.typewriter').text();

var length = text.length;
var timeOut;
var character = 0;


(function typeWriter() { 
    timeOut = setTimeout(function() {
        character++;
        var type = text.substring(0, character);
        $('.typewriter').text(type);
        typeWriter();

        if (character == length) {
            clearTimeout(timeOut);
        }

    }, 150);
}());

Answer 2

不幸的是，你不能用CSS做到这一点，所以你必须恢复到纯粹的JS方法。

正如您的评论所解释的那样，您需要您的文本包含一些HTML标记，因此我建议逐字动画是处理该问题的最简单方法。像这样：

var timer, fullText, currentOffset, onComplete, wordSet;

function Speak(person, text, callback) {
    $("#name").html(person);
    fullText = text;
    wordSet = text.split(" ");
    currentOffset = 0;
    onComplete = callback;
    timer = setInterval(onTick, 300);
}

function onTick() {
    currentOffset++;
    if (currentOffset == wordSet.length) {
        complete();
        return;
    }
    var text = "";
    for(var i = 0; i < currentOffset; i++){
     text += wordSet[i] + " ";   
    }
    text.trim();
    $("#message").html(text);
}

function complete() {
    clearInterval(timer);
    timer = null;
    $("#message").html(fullText);
    if (onComplete) onComplete();
}

$(".box").click(function () {
    complete();
});

Speak("Simon",
    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",

function () {
    setTimeout(function () {
        Speak("Javascript", "Simon has finished speaking!");
    }, 2000);
});

Here is a working example

注意：这段代码可能会被大量重新考虑，以便更加高效和简洁，但它应该完整地展示这个概念。

我也是created a letter-by-letter example。虽然它不能支持你的HTML标记需求，但它确实看起来更好，所以也许你可以让它适合你。

Answer 3

有一个纯CSS技巧可以做到这一点。

使用掩码元素，甚至是具有比文本元素更高的z-index的伪元素p:before或p:after。赋予它与文本背景和线条高度相同的颜色。将它放在文本正上方的绝对位置。

然后你只需要动画它就可以向右移动，一字一句地取消屏蔽。这只是一种解决方法，因为如果你在文本下面有一个复杂的背景，比如一个图像，那么这个技巧很难重现，因为你必须在掩蔽元素上映射背景图像。

使用CSS的逐字母文本外观动画

3 个答案: