1

CSS のみを使用して、単語の各文字を個別にアニメーション化する方法はありますか?

javascript/jqueryを使用して、単語を文字の配列として反復処理することは可能だと思います。

しかし、ここで私は簡単な方法を探しています..

4

3 に答える 3

9

CSS と JavaScript のどちらを使用する場合でも、ユーザー (または一部のライブラリ) は、個別にアニメーション化するために、各文字を独自の要素に配置する必要があります。例えば：

<p>Hi there</p>

...になる必要があります

<p><span>H</span><span>i</span><span> </span><span>t</span><span>h</span><span>e</span><span>r</span><span>e</span></p>

そうしないと、マークアップが少し...書くのが不快になるためです。

jQuery を使用する JavaScript では、要素のテキストを、そのテキストを文字単位で含む一連のスパンに置き換えるのは非常に簡単です。

var target = $("#target");
target.html(target.text().replace(/./g, "<span>$&</span>"));

次に、s をアニメートしますspan。(ここでは、問題の要素にはテキストと子要素ではなく、テキストのみが含まれていると想定しています。子要素がある場合は、より複雑になります。)

非常に基本的な例を次に示します。

HTML:

<p id="target" style="margin-top: 20px">Hi there</p>

JavaScript:

jQuery(function($) {

  var target = $("#target");
  target.html(target.text().replace(/./g, "<span>$&</span>"));

  setTimeout(runAnimation, 250);

  function runAnimation() {
    var index, spans;

    index = 0;
    spans = target.children();
    doOne();

    function doOne() {
      var span = $(spans[index]);
      if (!$.trim(span.text())) {
        // Skip blanks
        next();
        return;
      }

      // Do this one
      span.css({
        position: "relative",
      }).animate({
        top: "-20"
      }, "fast").animate({
        top: "0"
      }, "fast", function() {
        span.css("position", "");
        next();
      });
    }

    function next() {
      ++index;
      if (index < spans.length) {
        doOne();
      }
      else {
        setTimeout(runAnimation, 500);
      }
    }
  }

});

ライブコピー| ソース

于 2012-05-12T10:19:51.983 に答える
2

CSS のみでは不可能です (n 番目の文字の仕様が受け入れられるまで)。それまでの間、 lettering.js http://letteringjs.com/を使用して各文字をスパンでラップし、それぞれを個別にアニメーション化できます。

于 2012-05-12T17:44:54.893 に答える
0

TJ Crowder が説明した手法は非常に優れていますが、より高度なケースでは機能しません。スパンへの空白が消え、問題が発生する可能性があります。スパンの表示をインライン ブロックに設定すると (いくつかのプロパティをアニメーション化するために必要です)、1 つの長い単語になってしまいます。したがって、この手法は単純なフェード イン/フェード アウト アニメーションには最適ですが、より高度なケースにはhttps://github.com/jschr/textillate/blob/master/jquery.textillate.jsこの jQuery プラグインをお勧めします。

PS

私は氏を変更しました。Crowder コードなので、空白でも問題なく動作します:

var target = $("#test");
target.html( target.text().replace(/./g, "<span>$&</span>").replace(/\s/g, "&nbsp;"));

TweenMax staggerFromTo() メソッドを使用してアニメーション化しましたが、問題なく動作します。

ここにいくつかのデモがあります: http://blog.bassta.bg/2013/05/text-animation-with-tweenmax/

于 2013-05-22T14:23:27.307 に答える