6

テキスト付きが<div>あります。

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

<div>このテキストを一度に 1 ページに 1 文字ずつ表示したい:

L

ロー

ロー

... など、全文が表示されるまで

許容される代替案: HTML エンティティの問題やソフトなハイフネーションによる不安定な単語を避けるために、一度に 1 単語ずつ実行します。

ユーザーが をクリックすると<div>、アニメーションがキャンセルされ、全文が即座に表示されます。

要するに、和風アドベンチャーゲームでよく見かけるアニメを真似したい。(これは、タイプライターまたはテレタイプ効果と呼ばれることもあると思います。) 良い例を次に示します。

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

明らかに、JavaScript を使用してアニメーションのスクリプトを作成できます。タイマーを設定して、文字 (または単語) を 1 つずつ追加するだけです。

しかし、最新のブラウザーで CSS を使用して必要なことを行うことは可能ですか? (もちろん、少なくともonclickwith JS の要素クラスを変更する必要がありますが、それは問題ありません。)

更新:文字と文​​字、および HTML エンティティの問題を明確にするには:

私のテキストにはHTMLが散らばっています：

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

文字ごとにテキストを追加する単純なアプローチは機能しinnerHTMLません。

L

ロー

ロー&

…どっ！
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 に答える
1

これを行うための純粋な CSS トリックがあります。

疑似要素であっても、p:beforeまたはp:afterテキスト要素よりも高い z-index を持つマスク要素を使用します。テキストの背景色と線の高さと同じ色にします。テキストのすぐ上の絶対位置に配置します。

次に、文字ごとにマスキングを解除して、右に移動するようにアニメーション化する必要があります。画像のようにテキストの下に複雑な背景がある場合、背景画像をマスキング要素にマッピングする必要があるため、このトリックを再現するのは難しいため、これは単なる回避策です。

于 2014-02-09T08:36:41.530 に答える