Webアクセスで最もストレスになるのはページローディングではないかと思います。95年くらいの時は10分待って画像が表示されるなんてのはざらだった訳ですが、今はそんな悠長に待っていられる時代ではありません。画像リソースのみならずページがさくさくと表示されて欲しいものです。 もし表示が遅かったとしても解決する手段がない訳ではありません。そこで使ってみたいのがPage Loading Effectsです。

Page Loading Effectsの使い方

Page Loading Effectsはリンクをクリックした後、ページ遷移するまでに表示されるローディングエフェクトです。読み込んでいるというのが分かるのでユーザに安心感を与えられます。

これは動画で見てもらうのが一番わかりやすいと思います。

ページ切り替え時のアニメーションは昔からありましたが、Page Loading Effectsはアニメーションがよりスムーズでカラーリングもポップで見やすくなっています。なによりパターンが豊富で、サイトの雰囲気に合わせて自由に選べるようになっています。

切り替え時の例。

アニメーションはSVGで作られているので、読み込みが高速で軽快に表示されるのが良い感じです。ちょっと重たいWebサイトなどで使ってみると面白そうです。

Page Loading EffectsはHTML5製のソフトウェア(ライセンスは独自。商用利用可能)です。

Page Loading Effects | Demo 1 codrops/PageLoadingEffects