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

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

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

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

Q&A

解決済

1回答

379閲覧

jQueryのライブラリを表示されたタイミングで実行したい。

tokotokotoko

総合スコア14

jQuery

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

0グッド

0クリップ

投稿2019/11/04 08:06

ご覧いただきありがとうございます。
初歩的なことかもしれないのですが、つまづいてしまい、
解決方法がわからなくなってしまいましたので、お力を貸してください。

最終的にやりたいことは、
見出し文字を一文字づつふわっと表示させるということです。

jQuery TextFX
こちらのjQueryライブラリを利用しようと思います。
ただ、これを利用すると、ページ読み込み時にすべて実行されてしまい、
画面外にある文字のフェードが終わってしまいます。

元のコード

jQuery

1$('.ftext').textFx({ 2 type: 'fadeIn', 3 iChar: 20, 4 iAnim: '1000' 5});

試したこと

画像をふわっと表示させるという別のjQueryからコードを持ってきて、
以下のような形にしました。

jQuery

1$(function(){ 2 $(window).scroll(function (){ 3 $('.ftext').each(function(){ 4 var targetElement = $(this).offset().top; 5 var scroll = $(window).scrollTop(); 6 var windowHeight = $(window).height(); 7 if (scroll > targetElement - windowHeight + 200){ 8 $('.ftext').textFx({ 9 type: 'fadeIn', 10 iChar: 20, 11 iAnim: '1000' 12 }); 13 } 14 }); 15 }); 16});

これだとスクロール時に実行されるのですが、スクロールのたびに実行されてしまいます。
実行のタイミングをスクロールして表示された1回だけにしたいと思っています。

どうぞよろしくお願い致します。

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

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

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

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

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

guest

回答1

0

ベストアンサー

これだとスクロール時に実行されるのですが、スクロールのたびに実行されてしまいます。

スクロールでどれかの要素が表示された時点で全ての要素にtextFxが適用される書き方になっているので、まずそこは修正したほうがよいです。
$('.ftext').textFx$(this).textFx

で、それぞれの要素に「1度表示した」というデータを持たせて、分岐すればよいと思います。

【.data() | jQuery API Documentation】
https://api.jquery.com/data/

【jQuery【 data 】要素に紐付けてデータを設定・取得 | プログラマカレッジ】
https://programmercollege.jp/column/12322/

投稿2019/11/04 08:43

kei344

総合スコア69364

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

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

tokotokotoko

2019/11/04 08:48

早速のお返事ありがとうございます! 頂いた内容で試してみます。
tokotokotoko

2019/11/04 09:10

試してみたのですが、私の力では無理そうでしたので・・ 諦めることにします。kei344さんの回答をベストアンサーとさせて頂いて質問を終了します。 せっかく教えてくださったのに申し訳ございません。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問