tips / javascript

映画公式サイトで使われているローディング画面7選

映画の公式サイトで見かけたローディングを集めました。

一定の動きを繰り返す「スピナー」

the circle
「The Circle(http://thecircle.movie/)」より

JavaScript + CSSアニメーション(keyframe)

読み込み中は画像やアニメーションが一定の速度で同じ動きを繰り返し、読み込みが終わるとコンテンツが表示されます。例に挙げた作品ではロゴの「C」が読み込み中回転を続け、読み込みが終わると映画のタイトルの「THE CIRCLE」がフェードインしながら表示されます。回転するアニメーションはCSSアニメーションのkeyframeで作成されています。スピナータイプのローディングは、読み込みの進行具合がわからないため、読み込み時間が短い場合に向いています。

「%」で読み込みの進捗を表示

Free Fire
「Free Fire Official Movie Site(http://freefire-movie.com/)」より

JavaScript

読み込みの進行具合にあわせて、数字が0%から100%まで増えていきます。%表示は読み込みがどの程度完了しているか一目でわかりやすく、「読み込み完了まで残りどれくらいかかるのか」の目安になります。

「プログレスバー」で読み込みの進捗を表示

It
「IT – Official Movie Site –(http://itthemovie.com/)」より

jQuery + TweenMax

読み込みの進行具合にあわせて画面に水平に引かれた白いラインが、画面の左から右へ濃くなっていきます。前述の%表示と同様に読み込みの進捗が一目でわかります。

gifted
「Gifted | Fox Searchlight(http://www.foxsearchlight.com/gifted/)」より

jQuery + pace.js

プログレスバーとは少し形が違いますが、読み込みの進捗に合わせてロゴの色が左から徐々に塗られていきます。ロゴの画像を色違いで2つ用意し、CSSで徐々に色が変化するように見せています。

「プログレスバー」と「%」を組み合わせたローディング

It
「JOHN WICK 2 | Official Site(http://www.johnwick.movie/)」より

JavaScript

前述の「%」表示と「プログレスバー」を組み合わせて進捗がよりわかりやすくなっています。この映画では主人公のビジュアルとロゴも組み合わせてデザインされたローディング画面になっています。

SVGアニメーション

It
「Jackie | Fox Searchlight(http://www.foxsearchlight.com/jackie/)」より

jQuery + pace.js

読み込みの進捗にあわせてアルファベットが描画されるアニメーションを使用したローディングです。映画のロゴの「J」はSVGで作成されています。Jの字が完成すると残りの「ackie」のpng画像がフェードインするアニメーションです。

Frolida Project
「Frolida Project(http://floridaproject.movie/)」より

JavaScript

こちらも前述の映画と同様にSVGアニメーションを使用したローディングです。アニメーションする対象も同様にロゴですが、文字の枠線が描画されてから、白く塗られるというアニメーションになっています。映画のポスタービジュアルと同じ空と虹を背景にしているので、ローディング中も作品の雰囲気が感じられるデザインになっています。

< Prev PostNext Post >