勢いが強いほど大きく湾曲するスクロールエフェクトなどこだわりの詰まった Silvia Sguotti さんのポートフォリオサイト
サイトの構成が独特でおもしろい
今回ご紹介するのは、アートディレクターの Silvia Sguotti さんのポートフォリオサイトです。
イタリアで活動している方のようで、サイト内に掲載されているご本人の写真を見ても、すごく快活で情熱的な感じの方なのかなと想像します。
今回のサイトには、ドラッグ操作を行うことで矩形の大きさを変えることのできる仕組みが用意されていたり、縦方向と横方向のスクロールが上手に組み合わされていたり、ちょっと変わった演出が多く見受けられます。
WebGL はスクロール演出に利用されていますね。
リンク：
スクロール量に応じた変形処理はちょっと不思議な挙動
今回のサイトでは演出面は WebGL 一辺倒ではなく、むしろ WebGL は一部の演出のための要素の一つという感じの使われ方をしています。
トップページを始めとする各ページでは、カーソルに追従するドットのようなものが描かれるようになっており、思わずカーソルをぐいぐい動かしたくなります。こういうちょっとした遊び心のある演出が、ある意味今回のサイトの特徴かもしれないですね。
ページを開いた直後はスクロール方向は横方向になっており、スクロールしてコンテンツを進めていくと横にページがスライドするような感じになります。
静止画ではちょっとわかりにくいのですが、この上の画像のページでは、画面右下部分にあるテキストエリアのような枠の部分に、デザインツールでシェイプを操作するときのようなハンドルが描画されています。
このハンドル部分は実際に掴んで動かすことができ、段落の大きさを横長にしたり縦長にしたりと変化させることができます。
こういうのも、なんか一風変わった演出という感じで面白いですよね。
さらに、各事例のページに進んでいくと、今度はスクロール方向が横ではなく縦方向に変化します。
縦スクロールのレイアウトになると、たくさんの画像が次から次へと現れるのですが……
ここでスクロールの強さというか、勢いに応じて、シーン内の画像や動画が歪んで表示されるようになっています。
下に向かって進む場合と上に向かって進む場合で歪む方向が逆転するようになっていて、そのあたりも工夫されていますね。
ちょっと残念なのは、スクロール量に対して補間を行うような処理がおそらくされていないので、Mac のようなもともとスムーススクロールになっている環境ではキレイに見えるのでしょうが、Windows 環境や設定次第では、若干カクついた動きになってしまうケースがありそうです。
事例のページをおもむろに見ていると、日本語とおぼしき文字が出てくるのですが、日本人から見ると中国と日本がごちゃまぜになっているような感じに見えるので（これはけしてネガティブな意味ではなく）見ていて面白いなと思いました。
WebGL の実装としては比較的シンプルな部類かなと思いますが、全体的に演出がちょっと変わった方向性になっていて、独特な感性を想像させるポートフォリオになっているなと感じました。
ぜひチェックしてみてください。
