Pixi.js を利用しつつも自然な動きで演出！ベルギーのスタイリストさんのウェブサイト

doxas : 2017-10-06 12:08:15

センスよくまとまった美しい色彩

今回ご紹介するのは、ベルギーのとあるスタイリストさんのウェブサイトです。

WebGL の実装としては Pixi.js が利用されており、かなり自然な、スムーズなアニメーションや演出効果が光るサイトとなっています。

立体的な、いわゆる 3DCG っぽい挙動はほとんどないのですが、マウスカーソルに対するインタラクティブな効果など、実際にこれを作るとなったらかなり工夫が必要な部分も結構多く見受けられますね。

Pixi.js の作例は最近どんどん数が増えていますが、このクラスで使いこなせるのは結構すごいことだと思います。

今回のサイトは、一見すると二次元的なものばかりで構成されているので、人によっては WebGL が利用されていることに気が付かない場合もあるかもしれません。

言い換えると、それほどに自然に、WebGL がウェブサイトの一部として機能しているとも言えると思います。

DOM を CSS でアニメーションさせる、というのはもはやウェブのフロントエンドではありふれた表現のひとつですが、それをさらに研ぎ澄ませ進化させたような、そんな印象を受けるサイトなのかなと思います。

上の画像はスクロール操作に応じてシーン遷移が発生する瞬間をキャプチャしたもの。

この遷移アニメーション自体は結構一瞬なので、よーく観察していないとわかりにくいかもしれませんが、写真がスライスされたような感じで切り替わると同時に、右側のエリアの配色も変化します。

特に、右側のエリアにある余白部分、ここには日本人風に表現するなら和紙かなにかのような質感の背景が使われているのですが、シーン遷移する瞬間にはそこにインクが滲み出すかのように、別の色が浮き上がってきます。

こういったシーン遷移のようなわずかな瞬間にしっかりとこだわって作られているあたりが、かなり丁寧な印象を受ける要因のひとつなのかなと思います。

モデルさんの画像部分などをクリックすると、今度はそのスタイルの個別ページに移動します。

ここでは、三次元というと大袈裟なのですが、いくつかの画像が多少前後にずれて重なるような演出を見ることができます。

またよーく注目しているとわかるかと思いますが、このサイトではあらゆる部分でカーソルに連動して画像などが歪む演出が加えられています。

カーソルを写真の上にホバーさせると、まるで水面が揺らぐかのようにわずかに動くのですが、これもまた、さりげなく印象的な演出のひとつとして機能しているように感じました。

WebGL にあまり詳しくないひとにもわかりやすく説明すると、いわゆる普通の DOM 操作とは異なり、WebGL の場合はマウスカーソルの座標を用いたインタラクションは結構手間の掛かる処理になります。

WebGL では全体として完成した一枚の絵、のようになってしまうので、個別のパーツごとにマウスカーソルが乗っているかどうかを判定したければ、XY 座標を見ながら衝突判定を行うような実装を自ら行ってやる必要があるんですね。

その点、Pixi.js を用いる開発では、そういった「地味だけどだいじなところ」をライブラリ側である程度は担保してくれるので、手軽に、かつスピーディに、WebGL を用いた高品質な演出が行なえます。

今回のサイトはまるで DOM を CSS で制御しているのではと一瞬感じてしまうような、非常に自然な演出ができており、とても素晴らしいと思いました。