tumblr を利用したポートフォリオサイトに Pixi.js を利用したスクロール連動エフェクトが冴える！
シンプルだが個性の光る一品
今回ご紹介するのは、tumblr というプラットフォームを利用しながらも独自の実装を組み込んでリッチなビジュアルを実現している面白い例です。
持ち主の方はどうやらフランスのウェブディレクターの方みたいですが、こうやって Pixi.js を取り込んで利用しているのって珍しい例なんじゃないでしょうか。
シンプルでさりげないのですが、とても雰囲気がキレイにまとまっていて、センスを感じるページになっています。
スクロール連動によるさりげないインタラクション
最近は本当に Pixi.js を利用した事例が増えてきました。
そこに共通するのは、既存のウェブの良さやスタンスを過度に崩すことなく、自然に WebGL の高機能な部分だけを抽出して利用していることのような気がしています。
もちろんケース・バイ・ケース、いろいろなパターンがあるとは思うのですが、WebGL を使って表現を行っていくひとつのスタイルとして、Pixi.js ベースの軽量な WebGL による演出は、ひとつのトレンドになってきているのかなと思います。
今回のサイトはベースとなっているのが tumblr という面白いサイトなのですが、一点もののポートフォリオサイトのような洗練されたデザインが非常にかっこいいです。
ページが表示されると、上の画像にあるようにモノクロのバラの写真が背景にある状態で、ユーザーにスクロールを促すようなイントロ画面が出てきます。
バラの画像以外は全体的に黒の割合が多くなっているのですが、その分、大胆に大きくレイアウトされたフォントが際立って見えるような印象です。
そして、イントロのところにあったようにスクロール操作を行なってやると、背景にあるバラの画像が微妙に歪んだような感じになります。
勢い良くスクロールするほどバリっとノイズが走ったかのように歪むのですが、思わずぐいぐいとスクロールしてしまいたくなるような面白さがありますね。
歪み、あるいは滲みのようなスクロールインタラクションエフェクト。
スクロールして流れてくるフォントは斜めに傾いたような感じにレイアウトされていて、センターにただ寄せられているだけの配置ではなく、微妙に左右に配置が振り分けられたような感じになっています。
私はウェブデザインについては詳しくないというか専門家ではないので偉そうなことは書けないのですが、こうやってシンプルなレイアウトなのに動きを感じる作りになっているのはすごいなあと思いました。
また、背景の歪みエフェクトについつい目が行ってしまいがちですが、リンク部分にカーソルが乗っかると、その部分は文字が縁文字になるなど、細かいところもあまり見かけない面白い演出がなされています。
tumblr を自身のポートフォリオサイトのように使う例は、WebGL とは関係なく、たまに見かけます。
でもこうやって WebGL を利用する形で独自にオリジナルのデザインを作ってしまうというのはなんとも興味深い例だなと感じました。
冒頭にも書いたように、Pixi.js を利用した気軽な WebGL の利用例は、日々その件数を増やしていると感じています。
これまでの既存のウェブに多くあった二次元的な表現を少し拡張するだけで利用でき、なおかつそのパフォーマンスは遥かに高くなるわけですから、積極的に使っていくのが個人的にもおすすめです。
バリバリの 3D レンダリングもいいですが、こういった WebGL 事例も、どんどん増えてくれるといいなと思いました。
ぜひチェックしてみてください。
