スクロールすると要素がふわっとフェードインするサイト、
最近は当たり前になってきましたね。
そういったシンプルな仕掛けの場合、ボクはサクッと！
定番の「Animate.css + wow.js」で制作する事が多いです。
ただ…稀に原因不明の不具合が！
今回はその不具合に見舞われた場合の対処法をご紹介します！
「Animate.css + wow.js」の実装方法については、ここでは取り上げませんので、興味のある方は下記のリンクからどうぞ！
- 「Animate.css + wow.js」の実装方法についてはコチラのブログがいい感じです！参考にどうぞ
発生した問題
その不具合とは、
本来アクセス直後は消えているはずの要素が、何故か一瞬！チラッと見える！
「Animate.css」「wow.js」のHTML内での記述位置を変えたり試行錯誤してみたが改善されず…
どうも「Animate.css」で指定されている「CSS Animation （@keyframes）」に関して、実行に一瞬タイムラグがある感じ…
難しいのは、検証しようとシンプルなプロトタイプを作っても、
正しく動作して再現されない…
おそらくたくさんの画像、自作のJSや色々なJQueryライブラリの組み合わせなど…
様々な条件の組み合わせのみで発生する問題かと…ウーン…
検索しても中々似たような事例が引っかからなくて諦めかけていたところ、
下記サイトを発見！
「Animate.css」や「wow.js」絡みじゃないけど、直感的にもしや！って気がしたので早速検証してみました！
とりあえずの解決策！
上記サイトを参考にした上でボクの立てた仮説は、
「通常のCSSと違い、CSSアニメーションはページが読み込まれてレイアウトされるまで実行されていない！」です。
このためアクセス直後はCSSアニメーションの透過設定が適用されず、一瞬！チラッと見える！のでは？と
上記サイトの手法を参考に行った対策は下記です。
まずbody要素に「クラスpleload（名前は任意）」を追加。
次に２つの「クラスwow」「クラスfadeIn」がついた要素を非表示にしておきたいので、CSSに下記を記述
あとはJQueryで $(window).load 後に、「クラスpleload」を削除すればOK。
$(window).load は画像など含めてすべてのコンテンツの読み込みが終了するの待って実行するので、 これで一瞬！のチラッを防げるのでは！？
結果！無事成功しました！
皆さんももし「Animate.css + wow.js」の組み合わせで、同じような不具合に遭遇したらぜひ試してみてください！