jQueryのプラグインなどで非表示にして、アニメーションで表示させるような処理をしているのに、サイトを開いた時一瞬要素が全部見えてしまうことがあります。クライアントはこういうのを結構指摘してきますし、私自身もなんかな、と思うので良い対処法を探したところ、様々な場面で使いやすい方法をアップしてくれている記事を見つけました。
https://myscreate.com/textillate-fix/
こちらの記事はtexillate.js用に書かれていますが、シンプルな方法なので、他のjsでも同じ方法が使えます。私の場合は、typeitというjsで利用しました。まず、アニメーションを付ける要素をCSSでopacity:0にしておきます。（ここでは.type-it）その後、jsを動作させる前に、opacity:1にする。これだけです。
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $('.type-it').css('opacity',1).typeIt({ | |
| speed: 10, | |
| lifeLike: false, | |
| autoStart: true, | |
| breakLines: false, | |
| cursor:false, | |
| }); |
by 私はよく、こんな便利な記事で助かりました、と言って他のサイトのURLを引用します。元記事本体があるのだから、わざわざそれを引いてきてまた記事を書く意味があるのか？と思いもするのですが、元記事に少しだけメモを追加したかったり、少しだけアレンジしたり、元記事がなくなる可能性もあるので、記事にしています。それに、数カ月後、同じケースで困ってWEB検索したら自分の記事を出てきて助かった！などという間抜けなこともよくあるので、再掲載させていただいております。