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

Question

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

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

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

元のコード

$('.ftext').textFx({
    type: 'fadeIn',
    iChar: 20,
    iAnim: '1000'
});

試したこと

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

$(function(){
    $(window).scroll(function (){
        $('.ftext').each(function(){
            var targetElement = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();
            if (scroll > targetElement - windowHeight + 200){
                $('.ftext').textFx({
                    type: 'fadeIn',
                    iChar: 20,
                    iAnim: '1000'
                });
            }
        });
    });
});

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

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

Answer 1

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

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

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

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

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

Comments

[tokotokotoko]

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

[tokotokotoko]

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