Animate.cssってありますよね？
こちらを使って簡単な何メーションをページに何個か設定し、スクロールで発動するようにしたのですが、読み込みを行うとなぜかアニメーション部分が2回動作してしまうんですよね…。
例えば、右からのスライドインの場合だと、読み込んだ瞬間にスライドインが始まり、読み込みがひと段落した時点でもう一度、右からのスライドインが始まってしまうんですよね…。
あぁ、ちなみに画面スクロールの発火には、wow.js使ってます。
今までこんな症状はなかったので不思議でなりませんでした…。
原因はというと、CDNからAdobeやGoogleのフォントを読み込んでいるとこの現象になることが判明いたしました。
CDNが駄目なら、DLして読み込めば？と思い試しましたが、なぜかこちらも同様の症状となり解決には至らず…。
いろいろと試した結果、フォントの読み込みをHTMLやPHP側から行わず、CSSから直接読み込みことで問題なく動作するようになりました。
Googleフォントだと、<link>のほうではなく、@importの方を選択して、使っているCSSに直接記載する方法です。これだと問題なくうまくいきました。
根本的な原因があるのだと思いますが、試していないので何ともですが、jsからdocument読みこんでからにすれば解決するのだろうか…？
とりあえずはうまく動作しているので、こちらで様子を見てみようかと！
0 件のコメント:
コメントを投稿