Web制作 jQuery

【jQuery】スクロールしたら1文字ずつ表示させる方法【inview.js使用】

スクロールしてから文字を1つずつ表示させることって出来る?

最初は文字を全て非表示にしておいて、スクロールしたら1文字ずつ表示というのを今回はご紹介したいと思います。

また今回の実装では『inview.js』というjQueryのプラグインを使うので、『inview.js』の使い方についてはこちらの記事を参照下さい。

参考記事
inview.jsでスクロールして表示領域に入ったらフェードインさせる方法【jQueryプラグイン】
inview.jsでスクロールして表示領域に入ったらフェードインさせる方法【jQueryプラグイン】

続きを見る

今だけ!5大無料特典あり🎁

コーディングの時給アップにはこちら!


inview.jsを使ってスクロールしたら1文字ずつ表示させる方法

早速ですがこちらがデモになります。

See the Pen
スクロールすると1文字ずつ表示
by junpei (@junpei-sugiyama)
on CodePen.

もう一度最初から見たい場合は右下の『Rerun』をクリックして下さい。

冒頭にも書いた『inview.js』は『スクロールして要素が画面内に入ったら◯◯する』というものなので、今回の場合は『スクロールして非表示にしている文字が画面内に入ったら表示する』という形になります。

 

コード解説

コードを解説します。

まずHTMLはこちらになります。

<p class="text-animation">じゅんぺいブログ</p>

1文字ずつ表示させるために1文字ずつspanタグで囲みますが、それはHTMLではなくjQueryの方でやるので、HTMLはそのままで大丈夫です。

CSSはこちらです。

.text-animation span {
  opacity: 0;
}

これはspanタグで囲まれた文字をopacity: 0;で透明にして見えなくてします(正確には『非表示』ではなく『見えない』になります)

HTMLにはspanタグはないので『??』と思うかも知れませんが、先ほども書いた通りspanタグはjQueryによって囲まれるので大丈夫です。

なぜHTMLで直接spanタグを囲まないのかというと、文字数が増えたりしたら1つずつ囲むのが大変だからです。

そして重要なのがjQueryになります。

$(function () {
  $(".text-animation").each(function () {
    // 1文字ずつ<span>で囲む
    $(this)
      .children()
      .addBack()
      .contents()
      .each(function () {
        if (this.nodeType == 3) {
          $(this).replaceWith(
            $(this).text().replace(/(\S)/g, "<span>$1</span>")
          );
        }
      });
    // スクロールして要素が画面内に入ったら文字を表示
    $(this).on("inview", function () {
      // 1文字ずつ順番に表示(不透明にする)
      $(this).css({ opacity: 1 });
      for (var i = 0; i <= $(this).children("span").length; i++) {
        $(this)
          .children("span")
          .eq(i)
          .delay(200 * i) // 文字間の時間
          .animate({ opacity: 1 }, 1000); // 全部表示されるまでの時間
      }
    });
  });
});

この中でご自身でカスタマイズする場合は、2行目の文字に対するclass名と、最後の時間の数字になります。

あとはopacityの部分をanimate()で使えるプロパティであれば変更可能です(数字で指定できるものだけなので、colorなどは不可)

例えば以下のようにフォントサイズを大きくすることも可能です。

See the Pen
Untitled
by junpei (@junpei-sugiyama)
on CodePen.

以上になります。

 

コーディングの時給と作業効率を上げる!
2年間の実務で実際に使ったコードをまとめた『コーディング&WordPressメモまとめ集』をBrainで公開しています。
  • コピペで使えるWordPressの各テンプレート
  • 実務でよく使う見出し一覧
  • 実務でよく使うテキストのhoverアニメーション
  • 実務でよく使うボタン内の矢印9種類
  • Contact Form 7の色々・・・
などなど、他にもコピペで使えるコードがたくさん載せてあるので、時短=時給アップに繋がります。
さらに『コードのまとめ方が参考になった』というレビューも多数頂いているので、これを元に自分なりの"メモまとめ集"を作るという使い方も出来ます。
レビューは390件以上あるので、気になる方は以下のボタンからチェックしてみて下さい👇

今だけ!5大無料特典あり🎁

販売ページとレビューを見てみる


ブログランキング・にほんブログ村へ
  • この記事を書いた人

じゅんぺい

タイ・バンコク在住のWeb制作フリーランス兼ブロガー▶︎37歳からWeb制作を開始▶︎コーディングとWordPressのオリジナルテーマ制作でこれまで80件以上納品▶︎Web制作中心の当ブログは月間最高8.4万PV▶︎Twitterのフォロワーは6100人▶︎コーディングとWordPressのコンテンツを販売し、3日で500部突破&250万円&人気1位獲得 → 累計700部&420万円突破

-Web制作, jQuery