数字カウントアップ、プログレスバー＋数字カウントアップ
ProgressBar.jsというプログレスバーを表示するライブラリを使ってローディング時の数字カウントアップとプログレスバーを表示。jQueryでローディング画面をフェードアウトする。
「数字カウントアップ」のみの場合
See the Pen Roading01 by Toru Katsumata (@Toru-Katsumata) on CodePen.
「プログレスバー＋数字カウントアップ」の場合
See the Pen Roading02 by Toru Katsumata (@Toru-Katsumata) on CodePen.
プログレスバー＋数字カウントアップ＋画面が開く
ProgressBar.jsというプログレスバーを表示するライブラリを使ってローディング時の数字カウントアップとプログレスバーを表示。jQueryでローディング画面をフェードアウトと、上下の2エリアにクラス名を付与してCSSのアニメーションで画面を開く。
See the Pen Roading03 by Toru Katsumata (@Toru-Katsumata) on CodePen.
ロゴアニメーション
CSSのアニメーションで天地中央に配置したアイコン（ロゴ）を動かす。jQueryでローディング画面をフェードアウトする。
See the Pen Roading04 by Toru Katsumata (@Toru-Katsumata) on CodePen.
ロゴアウトラインアニメーション
vivus.jsというSVGアニメーションを表示するライブラリを使ってアウトラインのアニメーションを作成する。jQueryでローディング画面のフェードアウトやアニメーションのタイミングを操作する。
See the Pen Roading05 by Toru Katsumata (@Toru-Katsumata) on CodePen.
手書き風ロゴアニメーション
vivus.jsというSVGアニメーションを表示するライブラリを使ってテキストをマスクしたアニメーションを表示。jQueryでローディング画面のフェードアウトやアニメーションのタイミングを操作。
See the Pen Roading06 by Toru Katsumata (@Toru-Katsumata) on CodePen.
同日2回目のアクセスでローディング画面非表示
jquery.cookieというcookieを扱うライブラリを使ってサイトにアクセスした年月日を取得して同じ日付で2回目以降ならローディング画面を非常時にする。
※サーバにアップをしないと動作確認ができない。
See the Pen Roading07 by Toru Katsumata (@Toru-Katsumata) on CodePen.
