6

我有一个<div>文本。

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

我希望其中的文字<div>一次出现在第一个字符上：

大号

罗

洛尔

... 以此类推，直到全文可见

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

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

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

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

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

但是有可能在现代浏览器中用 CSS 做我需要的事情吗？（当然，我至少需要更改onclickwith JS 中的元素类，但没关系。）

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

我的文本中到处都是 HTML：

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

将文本附加到innerHTML逐个字符的幼稚方法不起作用：

大号

罗

罗&

……呸！
4

3 回答 3

10

你可以用一点 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);
}());
于 2013-11-04T13:09:47.493 回答
8

不幸的是，你不能用 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);
});

这是一个工作示例

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

我还创建了一个逐个字母的示例。虽然它不支持您的 html 标记需求，但它看起来确实更好，所以也许您可以调整它以适合您。

于 2013-11-04T12:55:33.980 回答
1

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

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

然后，您只需对其进行动画处理，使其向右移动，逐个字母地揭开掩码。这只是一种解决方法，因为如果您在文本下有一个复杂的背景，例如图像，那么这个技巧很难重现，因为您必须将背景图像映射到遮罩元素上。

于 2014-02-09T08:36:41.530 回答