マジシャンが活躍する新作映画 Now You See Me 2 ティザーサイトの WebGL 実装！ スクロールを活用した素晴らしい出来！
トレイラームービーもかっこいい
今回ご紹介するのは、新作映画の告知サイトです。
私はあまり映画に詳しくないのですが、原題「Now You See Me」という映画の続編タイトルで、2 の文字を冠しています。トレイラームービーも同時にサイト内で見ることができるのですが、かなり面白そうな見事なトレイラーですね。
この映画では 4 人のマジシャンが主人公。いわゆる怪盗のような役回りなのかなと思いますが、映画の内容はいったん置いておくとして、かなり気合いの入った見事なティザーサイトに仕上がっていますので、こちらを中心にご紹介しようと思います。
スクロールをうまく活用した面白いサイト構成
今回のサイトの最大の特徴は、なんといってもスクロールを有効に利用した独特な画面遷移だと思います。
サイトのスクロールに連動したコンテンツというのは、意外とたくさんありますよね。一定量をスクロールすると画面外からアイテムが滑らかにアニメーションでカットインしてくるなど、割とよく見かけます。
しかし今回のサイトは、そういう上下の移動を利用したスクロールの活用とはまた違った形で、スクロールと連動したコンテンツの展開を実現しています。
まずこちらはトップページの WebGL デモのキャプチャです。
これだけを見るとなんとも普通な感じに見えると思いますが、映画のタイトルが美しく輝いているこのシーンは、マウスを動かすと微妙に傾いたり、あるいは水面が波打つように揺らいだりしています。
よーく見ていないとわからないようなさり気ない変化なのですが、十分に魅力的です。
そして、画面をスクロールするようにホイールなどを操作すると、このタイトルロゴは上に流れて消えていくのではなく、奥にフェードアウトするような感じで消えていきます。そして、同時に今度は画面の左右から、次のデモのパーツがスクロールに合わせて画面内に現れてきます。
マジックをテーマにしている映画だけあって、上のキャプチャ画像のシーンも、結構凝った一種の「トリック」が仕込まれています。
これをネタばらししてしまうのは、ちょっとどうかなと思いますので、ぜひ実際にサイトをご覧になってみてください。
とは言っても、上のキャプチャ画像みればなんとなくわかっちゃいそうですけども（笑）
さらにさらにスクロールを続けていくと、今度は螺旋階段のようなシーンが出てきます。
永遠に螺旋階段の中心を落ちていっているかのような、不思議な気分にさせられます。こんなふうに、上下ではなく、前後をうまく利用したスクロール連動型のコンテンツというのは、普通に DOM だけで構築するのは現実的ではないですね。
その点、WebGL を利用することで見事にリッチな完成されたコンテンツに仕上げられているなと感じました。
映画のトレーラー映像を見ると、中国料理店のようなシーンもあり、上の画像のシーンは、それになぞらえたものなのでしょう。
マジックの代名詞であるトランプと、怪し気な中国料理店の様子が、見事に WebGL で表現されています。
隅から隅まで、本当に映画の魅力がつめ込まれたような、本当に素晴らしいサイトに仕上がっています。
こういったティザーサイト系のコンテンツは、そのコンテンツの販促時期を過ぎれば見られなくなってしまうことが多いです。ぜひ、いち早く公開されているティザーサイトを楽しんでみてください。
とてもよくできたコンテンツだと思います。
