文字の変形演出に Pixi.js を利用！ 多彩な技術を駆使した Orus Executive Search のウェブサイト
ダイナミックな変形演出
今回ご紹介するのは、日本で言うところの、いわゆる転職エージェント企業のウェブサイトです。
こちらの企業はフランス・パリに拠点を置いている企業のようで、どちらかというと管理職などのハイエンドな転職の仲介をするタイプの企業みたいです。
それだけに、サイトのほうもかなり高級感のある印象に仕上がっていて、とてもオシャレな感じになっていますね。
全体的にかなり動きのあるインタラクション
今回のサイトは、WebGL を利用している部分はかなり限定的です。
各ページのトップ部分、最初に画面に映るロゴマークのようにアルファベットが表示されるエリアでのみ、Pixi.js を利用した WebGL の演出が行われています。
アルファベットの文字が、別の文字に切り替わる際、シームレスに変形アニメーションするような演出が加えられているのですが、これが WebGL による処理になっているみたいですね。
画面の左右にある、次のページに移動するためのリンクなどを押した際、このアニメーション付きのページ遷移が起こるようになっています。
下の画像は、アルファベットの C の文字へと変形する途中の様子をキャプチャしたもの。
実際に動いている様子を見ないと、なんとも静止画だけではわかりにくいかなと思いますが……
アニメーションそのものは、かなり滑らかに動いていて、とても心地よい動きです。
正直なところ、今回のサイトはこのアルファベットの変形アニメーション以外は WebGL ではないので、あまり WebGL に関連した部分で紹介できるところは無いのですが、サイトの全体的な傾向として、様々なアイテムがかなり動的に配置されているのが特徴的かなと思います。
スクロールに連動して各種要素が画面の外からスライドしてくるなど、かなりインタラクティブな動きに工夫が凝らされています。
このような動きの多いサイトのなかで、特に複雑なアニメーションが必要になったトップ部分の演出については、CSS 等で表現するのはかなり難しいので Pixi.js を使っているのだと思います。
上の画像のページも、かなり滑らかに動きはするのですが WebGL ではなく CSS による演出になっています。
WebGL による演出は、かなり複雑なことができる反面、実装難易度がどうしても高くなってしまう傾向があります。
CSS の transform を利用して表現できるものであれば、無理に WebGL でやるよりも、普通に DOM を動かして実装したほうがいい場合も実際たくさんあります。
今回のサイトは WebGL を使っている部分こそ少ないですが、そのバランス感覚はなかなか素晴らしいと思います。ダイナミックなアニメーションを使いつつも、洗練されたキレイな印象のサイトに仕上がっており、普通にフロントエンドの実装例として参考になるのではないでしょうか。
興味のある方は、ぜひチェックしてみてください。
