流体エフェクトを利用したページはなんとインターン募集ページ! 老舗プロダクションはやっぱりすごい

doxas : 2017-01-13 13:32:38

老舗はインターン募集さえも気合い入ってる

今回ご紹介するのは、フロントエンド界隈の人なら恐らく知っている人が多いと思われる、老舗のプロダクションが公開しているインターン募集サイトです。

WebGL を始めとする様々な先進的な取り組みやウェブサイトを多く手がけてきた老舗だけあり、インターンの募集ページにも流体仕込んできます。やばいですね。

流体のデモは、WebGL で実装されたものはいくつかあり、今回のものについてもアルゴリズム的に珍しいということは既に言えない部分もあります。ただ、ロゴが流れに引っ張られて伸びるような演出とか、結構凝った作りになっています。

マウスの動きによって生み出される流れ

今回のサイトは、WebGL で実装されているのは、この流体のデモのみです。

それ以外の部分は巧みに CSS やスクリプトを操りながら、画像などを活用して卒なく作られている感じで、さすがの完成度ですね。

流体のデモの部分は、マウスカーソルを動かすことで、その場に流れが生まれるスタイルで、流体のデモとしてはよく見かける表現かなと思います。

さりげない、暗めの背景色を採用しているので、波が立ったときの輝くような表現が非常に美しい仕上がりになっています。

上の画像を見るとわかるかと思いますが、ロゴの部分が流れの干渉を受けて歪むようになっています。

これは流体の表現をうまく組み合わせた面白い見せ方だなと思いました。

また、この手の実装を自分で作ったことがあればわかるかと思いますが、負荷が高くなりすぎないように縮小バッファを使って流れを計算していると思います。

GPGPU 的に、テクスチャにベクトルや圧力などを書き込むことで、GLSL で高速に流れを計算させている感じですね。

波が広がっていくアニメーションの速度なども心地よい感じで、とてもかっこいいです。

今回のサイトは、あくまでもインターンの募集ページなんですよね。

なにかプロダクトの宣伝をするとか、そういった広告的な側面の強いページではないのですが、それだけに、このような表現が行える人と一緒に働きませんか!? という強いメッセージ性を感じる、素晴らしいコンテンツになっていると感じました。

流体系のプログラムは、なかなかフロントエンドエンジニアにとっては難易度の高い表現方法かと思いますが、比較的軽快に動いている様子を見ると、ウェブ表現の先端を垣間見たような気持ちになれるのではないでしょうか。

ロゴが流れに影響して揺らぐ様子など、とても見事です。

ぜひチェックしてみてください。

リンク:

WE3 - jam3

share

follow us in feedly

search

search

monthly

sponsor

social