スクロールするたびに表示されるタイピングエフェクト

t.jsを使ってスクロールで表示位置まで来たらタイピングエフェクトを使い文字を表示しようとしています。が、現在の状態だとスクロールするたびに文字が何度もエフェクト共に表示されてしまいます。一度だけ、スクロールしたら表示して後は、そのまま表示で良いのですが、どこを変更すれば良いのでしょうか。

html
1<p class="demo demo1">Hello</p>

js
1$(function(){
2        　$(window).scroll(function (){
3            $('.demo').each(function(){
4                var elemPos = $(this).offset().top;
5                var scroll = $(window).scrollTop();
6                var windowHeight = $(window).height();
7                if (scroll > elemPos - windowHeight){
8                    $('.demo').t({
9                        speed_vary: true,
10                        mistype: true,
11                        caret: false,
12                        repeat:false
13                    });
14                }
15            });
16        　});
17        });

行動規範の内容に同意します

回答2件

変数scrollFlagを定義してスクロール後の変数にの値を変えることで、変数で判断する。

js
1var scrollFlag = false;
2$(window).scroll(function (){
3   $('.demo').each(function(){
4     var elemPos = $(this).offset().top;
5     var scroll = $(window).scrollTop();
6     var windowHeight = $(window).height();
7     if (scroll > elemPos - windowHeight && scrollFlag==false){
8         scrollFlag=true;
9         $('.demo').t({
10            speed: 1,
11            speed_vary: true,
12            mistype: 50,
13            caret: true,
14            repeat:false
15         });
16     }
17   });
18});

投稿2021/03/19 07:08

pocoapoco3

総合スコア6

ベストアンサー

t.jsの動作を確認してみると、タイピング開始時に子要素にspan要素を追加しているようなので、
子要素にspan要素がある場合は対象外にすればよさそうです。

js
1            $('.demo').each(function(){

上記のセレクタを下記に変更すれば、一回のみ実行されるようになりました。

js
1           $('.demo:not(:has(span))').each(function(){

t.jsは今回初めて知りましたので、もっといい方法があるのかもしれません。

タイピングさせたい要素が複数あるときにも対応するコードを提示しておきます。

js
1$(function(){
2  $(window).scroll(function (){
3    $('.demo:not(:has(span))').each(function(){
4      var elemPos = $(this).offset().top;
5      var scroll = $(window).scrollTop();
6      var windowHeight = $(window).height();
7      if (scroll > elemPos - windowHeight){
8        $(this).t({
9          speed_vary: true,
10          mistype: true,
11          caret: true,
12          repeat:false
13        });
14      }
15    });
16  });
17});