【jQuery】文字が1文字ずつ出るアニメーション作成方法

この記事は約2分で読めます。

タイトルとか、サイトのキャッチをアニメーションで出す時、
一文字ずつフワッフワッと出てくると「おっ!」ってなるじゃない。
そんな「おっ!」を聞きたくて一文字ずつ出るテキストを作成してみたいと思います。
まずはdemoでどんな感じのアニメか確認してね!
(コメダでブログ更新していたので、たしかコメダのシロノワール?のテキストです)

DEMO

とろ~りなめらかソフトクリームとほんのりココア香る、あったかバウムクーヘン。

もう一度最初からアニメーション

HTML

<p class="demoTxt">とろ~りなめらかソフトクリームとほんのりココア香る、あったかバウムクーヘン。</p>

CSS

.demoTxt {

  display: block;

  opacity:0;

  font-size: 24px;

  font-weight: bold;

  text-align: center;
}
.demoTxt span {

  opacity: 0;

  -webkit-transition: .6s ease-in-out;

  transition: .6s ease-in-out;
}

jQuery

// アニメーションさせたいクラス
var container = $(".demoTxt");
// アニメーションスピード
var speed = 80;

// テキストの間にスペースを入れます
var content = container.html();
var text = $.trim(content);
var newHtml = "";

// スペースで区切ったテキストを、テキストの数だけspanで囲む
text.split("").forEach(function(v) {

 newHtml += '<span>' + v + '</span>';
});

// spanで囲んだテキスト群をHTMLに戻す
container.html(newHtml);

// 1文字ずつ表示
var txtNum = 0;
container.css({opacity: 1});
setInterval(function() {
  container.find('span').eq(txtNum).css({opacity: 1});

 txtNum++
}, speed);

コメント

  1. shin2 より:

    自分が欲しいコードに巡り合いました。有難うございます。
    他のは、Textillate.jsもそうですが、イベントでは2回目はアニメが起きません。
    こちらは
    content は決め打ちテキストで、var newHtml = “”;でボタン実行で何回もアニメが実行されます。こうゆうのが欲しかったでした。とりとめもなく嬉しくて書き込んでしまいました。ではでは これで

タイトルとURLをコピーしました