jQuery Web制作

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

※ 当サイトではアフィリエイト広告を利用しています

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

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

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

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

続きを見る

 

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

1,100部突破🎉

商品ページはこちら!

2024年4月15日値上げ!

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.

以上になります。

Web制作おすすめ教材と案件獲得サービス
当ブログではWeb制作学習におすすめの教材を厳選してご紹介しています。
こちらの記事を参考に教材を購入して成果を出している人もたくさんいるので、自分に必要な教材を探してみて下さい。
また、学習面だけでなく営業面である案件獲得サービスもご紹介しています。
スキルが身についても仕事がなければ意味がないので、営業に不安がある人はこちらの記事をぜひ参考にしてみて下さい。
この記事を参考にスキルと営業力を身につけて稼げるようになりましょう!

-jQuery, Web制作