質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

2回答

1065閲覧

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

pocoapoco3

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

jQueryプラグイン

jQueryの拡張機能。 様々な種類があり、その数は膨大です。公開済みのプラグインの他にも、自作することもできます。 jQueryで利用できるようにしておくだけで、導入およびカスタマイズが比較的容易に行なえます。

スクロール

スクロールとは、ディスプレイスクリーン上において連続的にコンテンツが滑っていくことを指します。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/03/19 04:17

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 });

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

変数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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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});

修正個所
$('.demo').t({$(this).t({

投稿2021/03/19 05:48

編集2021/03/19 07:32
hatena19

総合スコア33620

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pocoapoco3

2021/03/19 07:04

ご回答ありがとうございます! 自分で変数を立てて判断する方法を思いついたため、そちらで進めていました。こちらの回答の方も参考に今後も勉強を続けていきたいと思います。 ありがとうございます。
hatena19

2021/03/19 07:29

変数の方法だとタイピングさせたい要素が複数あるときに難しそうです。 class="demo demo1" となっていることから、複数の場合も想定しているのかなと推測しました。 ただ、複数の場合にも対応させるには、もう一か所修正が必要ですね。 回答に追記しておきました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問