textillate.jsで指定要素が一瞬表示されてしまう問題
posted : 2018.04.06
opacity指定をCSSとJavaScriptに記述で解決
このサイトではスクロールイベントでtextillate.jsを発火させています。
スクロールしていって、指定した要素が画面内にくるとアニメーションと共に表示される系のよくあるやつですね。
導入時は気が付かなかったのですが、ちょっと気になる動作を見つけたので挙動の調整をしようと思ったら…
なぜかハマり（爆）予想以上に修正に時間がかかりました。
具体的には、スクロールイベント発火タイミングが体感的に少し遅れる感じです。
表示されている文字がぱっと消えてフェードインアニメが開始されると。
自分が使おうとしたアニメーションは要素内のテキストを一文字ずつ切り分けて動かす種類（仕組み的には全種類そうなのかも）だったので、色々試す選択肢があるだけにやってるうちにこんがらがってきたのかもしれません。
結果から言うと下記であっさり解決。
- アニメーション要素にCSSでopacity:0;を指定
- JS(jQuery)で.textillate()手前に.css(‘opacity’,1)をチェーンさせる
ソース的には下記のような感じになりました。
［CSS］
［JS］
※textillateのオプション内容はこのサイトと同じものです。
スマホやタブレットで起こりやすい？
このサイトだとPCでは問題なし。
スマホだとiOSでもAndroidでも発生しました。
とりあえず解決したっぽいんですが、なぜこんなにハマったのか…
そもそも結構初期段階でopacity指定は試したはずなんだけどなあ。。
たぶんどっかで凡ミスがあったんでしょうね。ぺーぺーですし。
というわけでtextillate.jsで指定要素が一瞬表示されてしまう問題とかこつけて記事を書きましたが、実際は↑のソースコード表示サービス「gist」の表示テスト記事でした。
シンプルで軽量、テキストアニメーションプラグイン「Textyle.js」作りました
2019.1.7追記
textillate.jsよりもスリム、かつシンプルなテキストエフェクトプラグインをjQueryで作りました。
jQuery script.netでも紹介されている模様。
↓の記事でダウンロード方法(github)や使い方を解説しているので、興味があればどうぞお試し下さい。
軽量なスクリプトと少しのCSSで使えますよ〜。
