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

javascript
この記事は約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);
SNSフォローボタン
エンデ・バタローをフォローする
javascriptjQueryサイト制作

東京に住み始めて4年目。

前は神戸に。その前は名古屋に住んでいました。

ある年の冬、車で島根県へ旅行に出かけました。
同県の山中にある寒村をゆるゆると走っていると地面が凍結しており
車ごと川に滑り落ちそうになった経験を持つ30才(男)です。

フロントエンドを始めて4年目になります。
エディタはAtomを利用して、日々の業務でイラレとフォトショ、HTMLとCSSとjavascriptとphpを使用してます。
仕事をしていて、検索する手間を省くためフロント技術ブログを書いています。

エンデ・バタローをフォローする
シェアする
スポンサーリンク
初めてのブログ

コメント

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